npm 包 redux-actionize 使用教程

简介

redux-actionize 是一个封装了 Redux 中 action 创建函数生成的工具，可以通过提供一个 action type 的枚举，自动为每一个 action type 创建对应的 action 创建函数，并返回一个 actionCreators 对象。在开发中使用这个工具可以让代码更加规范、易读、易维护。

安装

使用 npm 安装：

npm install redux-actionize --save

或者使用 yarn 安装：

yarn add redux-actionize

使用

1. 创建 action type 枚举

首先需要创建一个用于定义 action type 的枚举，例如：

export const ActionTypes = {
  INCREMENT: 'INCREMENT',
  DECREMENT: 'DECREMENT',
  RESET: 'RESET',
};

2. 使用 redux-actionize 生成 action creators

在需要使用 action creators 的文件中，可以使用 redux-actionize 生成 action creators，例如：

import { createActionizers } from 'redux-actionize';
import { ActionTypes } from './actions';

const actions = createActionizers(ActionTypes);

export default actions;

这样就可以得到一个对象 actions，包含了 INCREMENT、DECREMENT 和 RESET 三个 action creators。

3. 在 reducer 中使用 action creators

在 reducer 中可以直接使用 action creators，例如：

-- -------------------- ---- -------
------ - ----------- - ---- ------------
------ ------- ---- -------------------

-------- ------------- - -- ------- -
  ------ ------------- -
    ---- ----------------------
      ------ ----- - ---------------

    ---- ----------------------
      ------ ----- - ---------------

    ---- ------------------
      ------ --

    --------
      ------ ------
  -
-

------ ------- --------

4. 在组件中使用 action creators

在组件中可以使用 action creators 更新 state，例如：

-- -------------------- ---- -------
------ ------ - --------- - ---- --------
------ - ------- - ---- --------------
------ ------- ---- -------------------

----- ------- ------- --------- -
  --------- - -- -- -
    ------------------------
  --

  --------- - -- -- -
    ------------------------
  --

  ----- - -- -- -
    -------------------
  --

  -------- -
    ------ -
      -----
        ------- -----------------------------------
        ------- -----------------------------------
        ------- -----------------------------------
        --------- ----------------------
      ------
    --
  -
-

----- --------------- - ----- -- --
  ------ ------------
---

------ ------- ------------------------ ------------------

总结

使用 redux-actionize 可以更加规范、易读、易维护地编写 Redux 代码。在 Redux 的实际开发中，我们可以根据项目需要定制自己的 action type 枚举，然后使用 redux-actionize 生成自己的 action creators。这样可以减少手写代码的工作量，提高开发效率，并且让代码更加易读易维护。

来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6006700ae361a36e0bce8c48