react结合 antd redux的简单使用

// AntdTest 测试 redux 组件 // 在src/index.js文件中 import 'antd/dist/antd.css' 安装 antd 的命令 npm install antd --save import React, { Component } from 'react' import { Button, Pagination, List, Input } from 'antd'; import store from '../store' export default class AntdTest extends Component { constructor(props) { super(props) console.log(store, 'store') this.state = store.getState(); store.subscribe(this.storeChange) // 订阅 Redux的状态---> 解决store里的数据已经更新了，但是组件还没有进行更新 console.log(this.state) } // 输入框 change 事件 changeValue = e => { // console.log(e.target.value); const action = { type:'changeInput', value:e.target.value } store.dispatch(action) } // 更新store storeChange = () => { this.setState(store.getState()) } // 添加条目功能 addItem = () => { const action = { type:'addItem'} store.dispatch(action) } // 删除条目功能 deleteItem = (index) => { console.log(this,'this') const action = { type:'deleteItem', index } store.dispatch(action) } // 渲染函数 render() { return ( <div className="antd-box">
        <div>store里面的数据name:{this.state.name}</div>
        <Input placeholder='请添加' style={{ width:'250px', marginRight:'10px'}} onChange={this.changeValue} />
        <Button type="primary" onClick={this.addItem}>添加条目</Button>
        <div style={{margin:'10px',width:'300px'}}>
          <List bordered dataSource={this.state.testList} renderItem={(item, index)=>(<List.Item onClick={(index) => this.deleteItem(index)}>{item}</List.Item>)} /> </div>
        <Pagination defaultCurrent={1} total={50} />
        <Button type="primary">Primary</Button>
        <Button>Default</Button>
        <Button type="dashed">Dashed</Button>
        <Button type="link">Link</Button>
      </div> ) } }

// store/index文件 如果你要使用中间件，就必须在redux中引入applyMiddleware
import { createStore, applyMiddleware, compose   } from 'redux'; // import thunk from 'redux-thunk'
import reducer from './reducer' import mySaga from './mySaga' import createSagaMiddleware from 'redux-saga'   //引入saga
const sagaMiddleware = createSagaMiddleware();   //创建saga中间件

// 使用Chrome浏览器安装插件，在浏览器右上角有三个点，然后点击"更多工具",再点击"扩展程序"，再点击右侧的"打开Chrome网上商店",然后搜索Redux DevTools 直接安装;(FQ工具) // 配置Redux Dev Tools插件 控制台调试仓库数据 // const store = createStore(reducer,window.__REDUX_DEVTOOLS_EXTENSION__ && window.__REDUX_DEVTOOLS_EXTENSION__()) // redux-thunk 要和 Redux Dev Tools插件一并使用了，需要使用增强函数。使用增加函数前需要先引入compose // Redux的中间件 redux-thunk Redux-saga
const composeEnhancers =   window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ ? window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__({}) : compose // const enhancer = composeEnhancers(applyMiddleware(thunk)) // 如果你想用 redux-thunk
 const enhancer = composeEnhancers(applyMiddleware(sagaMiddleware)) // 如果你想用 redux-saga
 const store = createStore(reducer, enhancer) // 创建数据存储仓库

// then run the saga
sagaMiddleware.run(mySaga) export default store // 官方写法 // const store = createStore( // reducer, // applyMiddleware(thunk) // ) 

// store/reducer.js 文件 默认数据 Reducer里只能接收state，不能改变state
const initState = { testList:[ 'vue', 'react' ], inputValue: '请输入内容', name: 'redux' } // state: 指的是原始仓库里的状态。 // action: 指的是action新传递的状态 // Reducer里编写业务逻辑
export default (state = initState, action) => {  //就是一个方法函数
  console.log(state,'redux-state',action,'redux-action') if (action.type === 'changeInput') { let newState = JSON.parse(JSON.stringify(state)) // 深度拷贝state
    newState.inputValue = action.value return newState } //根据type值，编写业务逻辑
  if (action.type === 'addItem' ) { let nState = JSON.parse(JSON.stringify(state)) // 新增
    console.log(nState,'nState') nState.testList.push(nState.inputValue); // nState.inputValue = '';
    return nState } if (action.type === 'deleteItem' ) { let newState = JSON.parse(JSON.stringify(state)) newState.testList.splice(action.index,1)  //删除
    return newState } return state }