美文网首页
antd+redux重写Todo {ActionTypes}的拆

antd+redux重写Todo {ActionTypes}的拆

作者: 路人_Ding | 来源:发表于2019-01-11 12:55 被阅读0次
    1.在store文件夹中创建一个ActionTypes.js文件
    文件代码如下:
    export const CHANGE_INPUT_VALUE = 'chang_input_value';
    export const ADD_TODO_ITEM = 'add_todo_item';
    export const DELET_TODO_ITEM = 'delet_todo-item';
    
    2.在TodoList.js文件中引入ActionTypes.js
    import { CHANGE_INPUT_VALUE , ADD_TODO_ITEM , DELET_TODO_ITEM } from './store/ActionTypes.js';
    3.把TodoList之前的action里的type全部换成大写的
        handleChange (e) {
            const action = {
                type : CHANGE_INPUT_VALUE,
                value :  e.target.value
            }
            store.dispatch(action);
        }
        handleAddList() {
            const action = {
                type : ADD_TODO_ITEM
            }
            store.dispatch(action)
        }
        handleDelet (index) {
            const action = {
                type : DELET_TODO_ITEM,
                index
            }
            store.dispatch(action)
        }
    
    
    4.同时也需要替换掉reducer中的type
        if(action.type === CHANGE_INPUT_VALUE) {
            const newState = JSON.parse(JSON.stringify(state));
            newState.inputValue = action.value;
            return newState; 
        }
        if(action.type === ADD_TODO_ITEM) {
            const newState = JSON.parse(JSON.stringify(state));
            newState.List.push(newState.inputValue);
            newState.inputValue='';
            return newState;
        }
        if(action.type === DELET_TODO_ITEM) {
            const newState = JSON.parse(JSON.stringify(state));
            newState.List.splice(action.index,1);
            return newState;
        }
    

    相关文章

      网友评论

          本文标题:antd+redux重写Todo {ActionTypes}的拆

          本文链接:https://www.haomeiwen.com/subject/rhqxdqtx.html