使用actionCreators统一创建action

1.在store文件夹下面新建一个文件名为actionCreators.js 2.在actionCreators.js文件中

//导入我们需要的CHANGE_INPUT_VALUE, ADD_TODO_ITEM, DELETE_TODO_ITEM数据 import { CHANGE_INPUT_VALUE, ADD_TODO_ITEM, DELETE_TODO_ITEM } from "./actionTypes"; //定义一个getInputChangeAction方法用于inputchangevalue的action export const getInputChangeAction = (value) => ({ type: CHANGE_INPUT_VALUE, value }); //同理 export const getAddItemAction = () => ({ type: ADD_TODO_ITEM, }); //同理 export const getDeleteItemAction = (index) => ({ type: DELETE_TODO_ITEM, index })

3.在TodoList.js文件中，首先导入刚刚定义的getInputChangeAction,getAddItemAction和getDeleteItemAction

import {getInputChangeAction,getAddItemAction,getDeleteItemAction} from './store/actionCreators'

4.改变action中内容的书写方式：

//原来的写法： // handleInputChange(e) { // const action = { // //type：指需要改变的东西 // type:CHANGE_INPUT_VALUE, // value:e.target.value // } //通过dispatch(action)把数据传递给store // store.dispatch(action); //现在的写法 handleInputChange(e) { const action = getInputChangeAction(e.target.value); store.dispatch(action); } // handleBtnClick() { // const action = { // type: ADD_TODO_ITEM, // }; // store.dispatch(action); // } handleBtnClick() { const action = getAddItemAction(); store.dispatch(action); } // handleItemDelete(index) { // const action = { // type: DELETE_TODO_ITEM, // //把下标的值index传递给reducer // index // } // store.dispatch(action); // } handleItemDelete(index) { const action = getDeleteItemAction(index); store.dispatch(action); }

这样就将action进行统一的创建了，有利于数据的管理