使用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);
}