简介
reducks 是一个用于管理 React 应用程序状态的 npm 包。它是基于 Redux 架构的，但是使用 reducks 可以将 Redux 的各种概念和组件封装起来，使其更加易于使用和可维护。
安装
可以使用 npm 安装 reducks：
--- ------- -------
使用
创建 store
要使用 reducks，首先需要使用它提供的 createStore 函数创建一个 Redux store。createStore 函数的参数是一个对象，包含以下四个字段：
name：store 的名称。reducers：一个 reducers 对象，用于处理 actions 的更新。sagas：一个数组，包含了将要执行的所有 sagas。middlewares：一个数组，包含了需要使用的所有中间件。
以下是示例代码：
------ - ----------- - ---- ---------- ------ ----------- ---- ------------- ------ - -------- - ---- ---------- ------ --------------- ---- -------------- ----- ----- - ------------- ----- ---------- --------- ------------ ------ ----------- ------------ ------------------ ---
创建 reducers
reducks 使用 "ducks" 这个概念，它将 reducers、action types 和 action creators 都放在同一个文件中，以便于组件的维护。
以下是一个简单的 reducer 例子：
-- ---------------------
----- -------- - -----------------
------ -------- ------- ------ -
------ - ----- --------- ---- -
-
------ ------- -------- ------------ ------ - --- ------- -
------ ------------- -
---- ---------
------ ---------- - ----- ------------ ---------- ----- --
--------
------ ------
-
-在上面的例子中，ADD_TODO action 的 type 被导出，以便其他地方的代码可以访问它。同时 addTodo 方法也被导出，它返回一个包含 action 的对象，这个 action 会被 reducer 处理。
创建 sagas
在 reducks 中，saga 用于处理复杂的异步操作。
以下是一个简单的 saga 例子：
-- ------------------ ------ - ---- --------- - ---- --------------------- ------ - --------- -------------- - ---- -------------------- --------- ----------- -------- - -- -------- ----- --- ---- ----- --- --------------- -- ------------------- ------- ----- --------------------------------- - ------ ------- --------- --------- -- - ----- ------------------- ------------- -
在上面的例子中，addTodoSaga 方法是一个 generator 函数，它接受一个 action，然后通过 put 函数调用了 addTodoSuccess action。这里也演示了一个简单的异步操作，我们可以通过 yield 语句等待一些异步工作的完成。
使用组件
组件可以通过 connect 函数来获取 store 中的 state 和 action creators。
以下是一个简单的组件例子：
------ ----- ---- --------
------ - ------- - ---- ----------
------ - ------- - ---- -------------------
-------- ----- -- ------ ------- -- -
----- ------ -------- - -------------
----- ----------- - -- -- -
--------------
------------
--
------ -
-----
----
----------------- -- -- -
--- ------------------------
---
-----
------ ----------- ------------ ----------- -- ------------------------ --
------- ----------------------------------
------
--
-
----- --------------- - -- ----- -- -- -- ----- ---
----- ------------------ - - ------- --
------ ------- ------------------------ ---------------------------在上面的例子中，组件调用了 addTodo 工具函数来添加一个新的 item。todos state 属性被 mapStateToProps 函数映射给了组件的 props。
总结
reducks 是一个非常强大的状态管理工具。它允许我们将 reducers、action creators 和 sagas 都放在同一个文件中，以便于组件的维护。通过使用 connect 函数，我们可以轻松的访问 state 和 action creators。
尽管 reducks 非常强大，但它对于 Redux 新手来说可能还是有一些学习曲线。无论如何，掌握 reducks 将会为您的 React 应用程序增加更多的灵活性和可维护性。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/60067008e361a36e0bce8b8b