什么是 redux-action-utils
redux-action-utils 是一个可以帮助开发者更方便地处理 redux action 的 npm 包。它提供了一些工具函数,可以减少开发者处理 action 的代码量,同时也可以让代码更加清晰易懂。
安装
使用 npm
安装:
npm install redux-action-utils
使用
createAction
createAction
函数可以根据传入的 action type,生成一个 action creator。可以将生成的 action creator 作为参数传入 dispatch 函数来触发 action。
import { createAction } from 'redux-action-utils' const increaseCounter = createAction('increase_counter') dispatch(increaseCounter())
生成的 action creator 函数可以传入一个参数作为 action 的负载(payload):
const setUserName = createAction('set_user_name') dispatch(setUserName('Tom'))
使用 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