用React实现简单的TodoList（二）

功能实现

本篇继续：

不同action的不同type +

创建action的函数实现 +

接受并处理各个action +

（以上是store部分，以下是TodoList功能部分）

实现输入与数据state的同步更新 +

实现向list里添加Todoitem + 

实现从list里删除某个Todoitem项 ；

 

 

 

不同action的不同type

在 actionTypes.js 文件中，定义一系列action的type变量

export const CHANGE_INPUT_VALUE = 'change_input_value';
export const ADD_ITEM = 'add_item';
export const DELETE_ITEM = 'delete_item';

 

 

 

创建action的函数实现

在 actionCreator.js 文件中，引用上述变量，实现各个不同action的创建

import { CHANGE_INPUT_VALUE, ADD_ITEM, DELETE_ITEM } from './actionTypes';

export const inputAction = (inputValue) => {
    return ({
            type: CHANGE_INPUT_VALUE,
            inputValue
    })
}

export const addAction = (inputValue) => {
    return ({
            type: ADD_ITEM,
            inputValue
    })
}

export const deleteAction = (index) => {
    return ({
            type: DELETE_ITEM,
            index
    })
}

 

 

 

接受并处理各个action

在 reducer.js 文件中，引入事先定义的各个action的type变量

import { CHANGE_INPUT_VALUE, ADD_ITEM, DELETE_ITEM } from './actionTypes';

接下来对不同type的action进行验证并处理

export default (state = defaultState, action) => {
    if( action.type === CHANGE_INPUT_VALUE ){
        const newState = JSON.parse(JSON.stringify(state));
        newState.inputValue = action.inputValue;
        return newState;
    }
    if( action.type === ADD_ITEM ){
        const newState = JSON.parse(JSON.stringify(state));
        newState.list.push(action.inputValue);
        newState.inputValue = '';
        return newState;
    }
    if( action.type === DELETE_ITEM ){
        const newState = JSON.parse(JSON.stringify(state));
        newState.list.splice(action.index, 1);
        return newState;
    }
    return state;
}

 

 

 

 

 

 

以下实现TodoList功能部分，首先在 TodoList.js 文件中引入各个创建action的函数

import { inputAction, addAction, deleteAction } from './store/actionCreator';

store.dispatch() 函数会将内容传给store，store会转发给reducer处理

 

 

实现输入与数据state的同步更新

inputChanged() + inputAction：实现输入与页面数据state的同步更新；

inputChanged(e) {
    const action = inputAction(e.target.value);
    store.dispatch(action);
}

 

 

实现向list里添加Todoitem

addItem() + addAction：实现向list里添加Todoitem；

addItem() {
    const action = addAction(this.state.inputValue);
    store.dispatch(action);
}

 

 

实现从list里删除某个Todoitem项

deleteItem() + deleteAction：实现从list里删除某个Todoitem项；

deleteItem(index) {
    const action = deleteAction(index);
    store.dispatch(action);
}

 

 

 

 

 

 

所有代码