npm 包 redux-action-utils 使用教程

阅读时长 5 分钟读完

什么是 redux-action-utils

redux-action-utils 是一个可以帮助开发者更方便地处理 redux action 的 npm 包。它提供了一些工具函数,可以减少开发者处理 action 的代码量,同时也可以让代码更加清晰易懂。

安装

使用 npm 安装:

使用

createAction

createAction 函数可以根据传入的 action type,生成一个 action creator。可以将生成的 action creator 作为参数传入 dispatch 函数来触发 action。

生成的 action creator 函数可以传入一个参数作为 action 的负载(payload):

使用 createAction 时,不需要手动定义 action 类型常量,因为 createAction 会自动生成这些常量。

createReducer

createReducer 函数可以帮助我们更方便地定义 reducer,同时也可以减少一些重复的处理代码。

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

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

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

createReducer 的第二个参数是一个对象,key 值是 action 类型,value 是处理该 action 的函数。

combineActions

在一个 reducer 中处理多个 action 时,可以使用 combineActions 函数将多个 action 组合起来。

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

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

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

combineActions 接受多个 action 类型作为参数,将它们组合成一个新的 action 类型。使用这个新的 action 类型作为 key 值,处理多个 action 的函数作为 value,就可以实现在一个 reducer 中处理多个 action。

总结

通过使用 redux-action-utils,我们可以减少一些处理 redux action 的重复代码,同时也可以让代码更加简洁和易懂。相信在实际开发中,这个库会给我们带来很多的帮助。

示例代码

https://codesandbox.io/s/redux-action-utils-demo-55cwk

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

纠错
反馈