前言
Redux 是一种基于 Flux 架构的状态管理器。它的核心是 reducers（reducer 函数），这些函数负责操作 state。redux-rubik-reducer 是一个可以帮助我们简化 reducers 编写的 npm 包。
在本文中，我们将介绍如何使用 redux-rubik-reducer。
步骤
安装
在终端中输入以下命令：
--- - -------------------
引入
使用如下代码引入 redux-rubik-reducer：
------ - ------------- - ---- ----------------------
创建一个 reducer
现在我们想实现一个 todo list 应用程序，我们需要创建一个 reducer。
----- ------------ - -
------ ---
--
----- ----------- - --------------------------- -
--------- ------- ------- --
----------------- ------ -
------ -----------------------------------
---
------------ ------- ------- --
----------------- ------ -
------ ------------------------- -- ------- --- ----------------
---
---在上面的代码中，我们首先定义了初始 state（包含一个名为 todos 的数组）。随后我们使用 createReducer() 函数创建了一个 reducer。这个 reducer 包含了两个 case，分别是 ADD_TODO 和 REMOVE_TODO。它们分别处理我们需要支持的“增加 todo”和“删除 todo”操作。
当我们分发一个 ADD_TODO 的 action 时，我们将新的 todo 添加到 state 的 todos 数组中。使用 Object.assign() 函数可以确保我们将一个“新的” state 返回给 store。同理，当我们分发 REMOVE_TODO 时，我们会从 todos 数组中删除一个被指定的 todo。
在 Redux store 中使用 reducer
现在，我们已经创建了一个 reducer，接下来的步骤是在 Redux store 中使用它。
------ - ----------- - ---- -------- ----- ----- - -------------------------
上面的代码创建了一个 Redux store，并将之前创建的 reducer 注册到这个 store 中。
在 React 组件中使用 Redux store
现在我们已经将创建的 reducer 注册到了 store 中。接下来，我们需要在 React 组件中使用这个 store。
在 React 组件中，我们可以使用 useSelector() 函数来获取 Redux store 中的数据，使用 useDispatch() 函数来分发对应的 action。
------ ----- ---- --------
------ - ------------ ----------- - ---- --------------
-------- ---------- -
----- ----- - ------------------- -- -------------
----- -------- - --------------
------ -
-----
----
----------------- -- -
--- --------------
-----------
------- ----------- -- ---------- ----- -------------- -------- ------- ----
------
---------
-----
---
-----
-----
----------------- -- -
-----------------------
----- ---- - ---------------------------------
---------- ----- ----------- -------- - --- ----------- ---- - ---
--
-
------ ----------- ----------- --
------- ----------------- -------------
-------
------
--
-上面的代码中，我们使用 useSelector() 函数获取了 Redux store 中的 todos 数组，并使用 useDispatch() 函数获得了一个用于分发 action 的 dispatch()。
我们在表单中定义了一个文本输入框，当用户输入任务之后，我们可以分发一个 ADD_TODO 的 action 来将 todo 添加到 store 中。另外，我们也使用了 Remove 按钮来分发一个 REMOVE_TODO 的 action，来从 store 中删除一个 todo。
结语
redux-rubik-reducer 是一个非常实用的 npm 包，它可以帮助我们简化 Redux reducers 的编写。在本文中，我们通过一个 todo list 应用程序介绍了如何使用 redux-rubik-reducer。希望这篇文章对于初学 Redux 的读者有所帮助。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/6005739e81e8991b448e9966