React&Redux actionCreators

2019-05-27 Yazzyk

0x01 创建文件

创建actionCreators.js

import {INPUT_VALUE_CHANGE,ADD_TODO_ITEM,DEL_TODO_ITEM} from './ActionTypes';

export const getInputChangeAction = (value) =>({
    type : INPUT_VALUE_CHANGE,
    value
});

export const getAddItemAction = () =>({
    type: ADD_TODO_ITEM
});

export const getDelItemAction = (index)=>({
    type: DEL_TODO_ITEM,
    index
});

0x02 修改

修改ToDoList.js相关的地方

    handleInputChange(e) {
        const action = getInputChangeAction(e.target.value);
        store.dispatch(action);
    }

    handleBtnClick() {
        const action = getAddItemAction();
        store.dispatch(action);
    }

    handleItemClick(index) {
        const action = getDelItemAction(index);
        store.dispatch(action);
    }
react