美文网首页
action使用actionTypes 与actionCreat

action使用actionTypes 与actionCreat

作者: LinaXuanling | 来源:发表于2019-04-30 12:10 被阅读0次

使用actionTypes,防止在编码时书写错误,而没有报错信息。方便调试。
actionTypes.js:

export const CHANGE_INPUT_VALUE = 'change_input_value';
export const ADD_TODO_ITEM = 'add_todo_item';
export const DELETE_TODO_ITEM = 'delete_todo_item';

actionCreators.js:

import { CHANGE_INPUT_VALUE, ADD_TODO_ITEM, DELETE_TODO_ITEM } from './actionTypes';

export const getChangeInputValue = (value) => ({
    type: CHANGE_INPUT_VALUE,
    value
})

export const getAddTodoItem = () => ({
    type: ADD_TODO_ITEM,
})

export const getDeleteTodoItem = (index) => ({
    type: DELETE_TODO_ITEM,
    index
})

在要用的对应组件的js文件中,引入actionCreators:

import { getChangeInputValue, getAddTodoItem, getDeleteTodoItem } from './store/actionCreators';


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

handleButtonClick() {
    const action = getAddTodoItem();
    store.dispatch(action);
}

handleItemDelete(index) {
    const action = getDeleteTodoItem(index);
    store.dispatch(action);
}

相关文章

网友评论

      本文标题:action使用actionTypes 与actionCreat

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