使用actionCreators统一创建action

最新推荐文章于 2021-07-31 20:56:05 发布

原创最新推荐文章于 2021-07-31 20:56:05 发布 · 818 阅读

0 ·

CC 4.0 BY-SA版权

React.js 专栏收录该内容

27 篇文章

订阅专栏

本文介绍了如何在Redux应用中创建并使用actionCreators，通过在actionCreators.js文件中定义action，然后在TodoList.js组件中导入并调用这些action，实现了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进行统一的创建了，有利于数据的管理