什么是 redux-actions-magic
redux-actions-magic 是一个可以帮助你轻松创建 Redux Actions 的 JavaScript 库。它解决了常见的 Redux 模式中的冗长 Action 声明的问题，同时提供了一些高级功能，例如异步处理和 Action 分离。
如何使用 redux-actions-magic
安装
首先，你需要安装 redux-actions-magic：
npm install redux-actions-magic
创建 Actions
然后，你可以使用 createAction API 来创建一个新的 Redux Action。createAction API 接收一个字符串类型的 actionType 和一个可选的 payloadCreator 函数。
// actions.js import { createAction } from 'redux-actions-magic'; export const increment = createAction('INCREMENT'); export const decrement = createAction('DECREMENT'); export const multiply = createAction('MULTIPLY', num => num * 2);
以上代码中，我们创建了三个 Redux Actions：increment，decrement 和 multiply，它们分别对应到 actionType 为 INCREMENT，DECREMENT 和 MULTIPLY。
multiply Action 还带有一个 payloadCreator 函数，它将接收一个参数并通过将其乘以 2 并返回到 Action 中。
创建 Reducers
接下来，你可以使用 createReducer API 来创建一个新的 Redux Reducer。createReducer API 接收一个初始状态和一个 Action 处理函数映射对象。
-- -------------------- ---- ------- -- ----------- ------ - ------------- - ---- ---------------------- ------ - ---------- ---------- -------- - ---- ------------ ----- ------------ - - ------ - -- ------ ------- --------------------------- - ------------ ------- - ------- -- -- -- --------- ------ ----------- - - --- ------------ ------- - ------- -- -- -- --------- ------ ----------- - - --- ----------- ------- - ------- -- -- -- --------- ------ ----------- - ------- -- ---展开代码
以上代码中，我们使用 increment，decrement 和 multiply 的字符串值作为键名，并将其映射到处理函数。每个处理函数都将接收一个 state 参数和一个 payload 参数（如果 Action 没有 payload，则 payload 将是 undefined）。我们可以更改 state 并返回一个新的 state。
整合中间件
redux-actions-magic 提供了一个方便的 API 来使用 Redux Middleware。使用 applyMiddleware API 可以将多个中间件整合到一个函数中，并在 Redux store 中使用它。
-- -------------------- ---- ------- -- -------- ------ - ------------ --------------- - ---- -------- ------ ----- ---- -------------- ------ ------- ---- ------------- ----- ----- - -------------------- ------------------------ ------ ------- ------展开代码
以上代码中，我们在 createStore 中使用了 applyMiddleware 函数，并传入了一个 thunk 作为中间件（你可以使用任何你想要使用的 Redux 中间件）。
处理异步行为
redux-actions-magic 还提供了一个方便的实用程序函数，可以处理异步行为。
-- -------------------- ---- ------- -- ---------- ------ - ------------- ----------------- - ---- ---------------------- ------ ----- --------- - -------------------------- ------ ----- --------- - -------------------------- ------ ----- -------- - ------------------ ----------- ----- ----- -- - ----- ------ - ----- ------------------------------------------------- ----- -------- - ----- -------------- ------ ---------------- - --展开代码
以上代码中，我们使用 createAsyncAction 函数创建了一个名为 multiply 的新 Action。在 createAsyncAction 中，我们传递了 actionType 和一个返回一个 Promise 的异步函数。
在这个例子中，我们使用 fetch API 获取一个包含 num 参数值的 URL，并将返回的响应作为 JSON 进行处理，最终返回响应中的 result 字段。在 Action 中，返回的 payload 将是异步操作的结果。
示例代码
-- -------------------- ---- ------- -- ---------- ------ - ------------- ----------------- - ---- ---------------------- ------ ----- --------- - -------------------------- ------ ----- --------- - -------------------------- ------ ----- -------- - ------------------ ----------- ----- ----- -- - ----- ------ - ----- ------------------------------------------------- ----- -------- - ----- -------------- ------ ---------------- - --展开代码
-- -------------------- ---- ------- -- ----------- ------ - ------------- - ---- ---------------------- ------ - ---------- ---------- -------- - ---- ------------ ----- ------------ - - ------ -- ---------- ------ ------ ---- -- ------ ------- --------------------------- - ------------ ------- - ------- -- -- -- --------- ------ ----------- - - --- ------------ ------- - ------- -- -- -- --------- ------ ----------- - - --- ------------------- ------- - ------- -- -- -- --------- ---------- ---- --- ------------------- ------- - ------- -- -- -- --------- ---------- ------ ------ ----------- - ------- --- ----------------- ------- - ------- -- -- -- --------- ---------- ------ ------ ------- -- ---展开代码
-- -------------------- ---- ------- -- -------- ------ - ------------ --------------- - ---- -------- ------ ----- ---- -------------- ------ ------- ---- ------------- ----- ----- - -------------------- ------------------------ ------ ------- ------展开代码
总结
在这篇文章中，我们介绍了 redux-actions-magic 这个能够轻松创建 Redux Actions 的 JavaScript 库，并提供了一些高级功能，例如异步处理和 Action 分离。
我们讲解了如何创建 Actions、Reducers 和整合中间件，以及如何处理异步请求的 Action。希望这篇文章能帮助你更好地使用 redux-actions-magic 来编写 Redux 应用程序。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6006700ce361a36e0bce8c54
