使用react-redux重写Todo

1.先安装react-redux依赖
$ yarn add react-redux  $ npm install --save-dev react-redux
2.在react项目写的src目录下创建index.js文件，写入代码
 //导入react依赖，引入react-redux依赖此时需要引用react-redux中的Provider的这个组件
import React from 'react';
import ReactDOM from 'react-dom';
import TodoList from './TodoList';
import { Provider } from 'react-redux';
import store from './store';

const App = (
    
        
    
);

ReactDOM.render(App, document.getElementById('root'));

3.在src目录下创建TodoList.js文件

import React from "react";
import 'antd/dist/antd.css';
import { Input,Button,List,Icon } from 'antd';
class TodoList extends Component {
    render() {
        return (
            

            

            
           提交
            
             (
                {item}
                
                )}
             />
             
        
        )
    }
}
export default TodoList；

4.在src目录下创建一个store的文件夹，在此文件夹中创建一个index.js文件来创建store数据仓库
import { createStore } from 'redux';
import reducer from './reducer';
const store = createStore(reducer);
export default store;

5.store仓库创建好后需要一个reducer来为store处理数据，在store文件夹下我们创建一个reducer.js文件
//为store中创建默认的数据
const defaultState = {
    inputValue : "123",
    List : []
}

export default (state = defaultState , action) =>{
    return state;
}

6.此时我们返回TodoList.js文件下引入react-redux中的connect方法
此方法是用来TodoList来连接store中的数据具体用法如下：
import { connect } from 'react-redux';
export default connect(null,null)(TodoList)
7.连接store中的数据需要一些规则，此时我们创建一个 mapStateToProps的函数它返回的是一个对象，
这个方法的意思就是把store中的数据映射给props，而这个方法中的state指的是store中的数据,然后再
把这个方法传到 connect方法中去现在就可以用this.props来调用数据
const mapStateToProps = (state) => {
    return {
        inputValue : state.inputValue,
        List : state.List
    }
}
export default connect(mapStateToProps,null)(TodoList);

8.接下来我们再来看connect的第二个参数，我们来写这个方法，这个方法的意思就是
我们把store中dispatch方法挂载props上，此时我们需要为input和button按钮添加
一些事件方法就可以写在 mapDispatchToProps上，因为我i们需要改变store中的数据
需要发送action和调用dispatch这个方法来修改数据，一旦我们的action发送成功我们就需要在reduce中处理这些action
const mapDispatchToProps = (dispatch) => {
    return {
        handleInputChange(e) {
            const action = getInputChange(e.target.value);
            dispatch(action);
        },
        handleAddClick() {
            const action = getInitList();
            dispatch(action);
        },
        handleDlete (index) {
            const action = getDeletList(index);
            dispatch(action);
        }
    }
}
export default connect(mapStateToProps,mapDispatchToProps)(TodoList);

9.我们返回reduce中来写处理action的代码
export default (state = defaultState , action) =>{
    if(action.type === CHANGE_INPUT_VALUE) {
        const newState = JSON.parse(JSON.stringify(state));
        newState.inputValue = action.value;
        return newState;
    }
    if(action.type === ADD_ITEM_LIST) {
        const newState = JSON.parse(JSON.stringify(state));
        newState.List.push(newState.inputValue);
        newState.inputValue='';
        return newState;
    }
    if(action.type === DELET_ITEM_LIST) {
        const newState = JSON.parse(JSON.stringify(state));
        newState.List.splice(action.index,1);
        return newState;
    }
    return state;
}

10.接下来就要把TodoList中action分离出去单独写在其他文件中我们在store文件夹中
建立ActionTypes.js和ActionCreatros.js代码如下
//ActionTypes.js
export const CHANGE_INPUT_VALUE = 'change_input_value';
export const ADD_ITEM_LIST = 'add_item_list';
export const DELET_ITEM_LIST = 'dlet_item_list';
//ActionCreatros.js
import { CHANGE_INPUT_VALUE , ADD_ITEM_LIST ,DELET_ITEM_LIST} from './ActionTypes';
export const getInputChange = (value) => ({
    type : CHANGE_INPUT_VALUE,
    value
})
export const getInitList = () => ({
    type : ADD_ITEM_LIST
})
export const getDeletList = (index) => ({
    type : DELET_ITEM_LIST,
    index
})

11.修改TodoList中的action
import React from 'react';
import { Input,Button,List,Icon } from 'antd';
import 'antd/dist/antd.css';
import { connect } from 'react-redux';
import { getInputChange ,getInitList ,getDeletList } from './store/ActionCreators';
const TodoList = (props) => {
    const { inputValue ,handleInputChange,handleAddClick,handleDlete } = props;

    return (
        

        

        
       提交
        
         (
            {item}
            {handleDlete(index)}}
             />
            )}
         />
         
    
    )
}

const mapStateToProps = (state) => {
    return {
        inputValue : state.inputValue,
        List : state.List
    }
}
const mapDispatchToProps = (dispatch) => {
    return {
        handleInputChange(e) {
            const action = getInputChange(e.target.value);
            dispatch(action);
        },
        handleAddClick() {
            const action = getInitList();
            dispatch(action);
        },
        handleDlete (index) {
            const action = getDeletList(index);
            dispatch(action);
        }
    }
}
export default connect(mapStateToProps,mapDispatchToProps)(TodoList);