简介
reducks 是一个用于管理 React 应用程序状态的 npm 包。它是基于 Redux 架构的，但是使用 reducks 可以将 Redux 的各种概念和组件封装起来，使其更加易于使用和可维护。
安装
可以使用 npm 安装 reducks：
npm install 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