前言
Redux 是一种 JavaScript 状态容器，用于编写可预测化应用程序的完美工具。它驱动着许多交互且高度动态的 Web 应用程序。
然而，Redux 并不是一个完美的解决方案。在 API 方面，它有时会变得很冗长和枯燥。我们可以使用 Redux-wrangler，这是一个由节点组合而成的库，它通过连接动作和 reducers，提供了一个高效简单的方式来处理 Redux。
本文将详细介绍如何在您的项目中使用 redux-wrangler。
安装过程
在项目文件夹中，运行以下命令来安装 Redux-wrangler：
--- ------- --------------
或者你也可以使用 yarn：
---- --- --------------
Redux-wrangler 的核心是一个名为 Wrangler 的对象。 Wrangler 允许我们创建新的动作，并使用映射操作将它们与 reducers 进行关联。
API
以下是 Wrangler 的主要方法：
Wrangler.createAction(actionName, payloadCreator)
参数
- actionName(string): 创建新动作的名称。
- payloadCreator(function): 这是一个可选的函数，允许您同时传递更多的数据到动作中。
例子
------ - -------- - ---- ----------------- ----- --------------- - ----------------------------------- ----- --------------- - ----------------------------------- -------- -- -- ------ ---- ---------------------------- -----------------------------
Wrangler.createReducer(initialState, handlers)
参数
- initialState: state 的初始值。
- handlers(object): reducers 的映射操作。
例子
------ - -------- - ---- ----------------- ----- ------------ - - ------ -- -- ----- ---------------- - - ---------- ------- -- -- ------ ----------- - - --- -- ----- ---------------- - - ----------- ------- - ------- -- -- -- ------ ----------- - -------------- --- -- ----- ------- - ------------------------------------ - -------------------- -------------------- ---
Wrangler.createSlice(options)
参数
- name(string): 纪录的名称，会作为 action type 的前缀和 reducer 的键值。
- initialState: function(state): 纪录的初始状态。
- reducers(object): 纪录的 reducers 对象。
例子
------ - -------- - ---- -----------------
----- ----- - ----------------------
----- --------
------------- -
---------- ---
--
--------- -
-------- ------- - ------- -- -- --
---------
---------- -------------------- ---------
---
----------- ------- - ------- -- -- --
---------
---------- ----------------------------- -- ------- --- ------------
---
--
---
-- ---- ------- - --- ----- ------- --- ------ --------
------ ----- - -------- ---------- - - --------------
------ ------- --------------现在，您已经准备好在您的项目中开始使用Redux-wrangler 了。 让我们看看如何编写一些具体实例。
例子
创建动作和 reducer
------ - -------- - ---- ----------------- ----- ---------------- - ----------------------------------- ----- --------------- - ----------------------------------- ----- --------------- - ----------------------------------- -------- -- -- ------ ---- ----- ------------ - - ------ -- -- ----- ---------------- - - ---------- ------- -- -- --------- ------ ----------- - - --- -- ----- ---------------- - - ---------- ------- -- -- --------- ------ ----------- - - --- -- ----- ---------------- - - ----------- ------- - ------- -- -- -- --------- ------ ----------- - -------------- --- -- ----- ------- - ------------------------------------ - -------------------- -------------------- -------------------- ---
通过调用 createAction 函数可以创建一个新的动作，包括给他一个名称和一个可选的 payloadCreator， 这允许您同时传递更多的数据到动作中。
使用 createReducer 函数，将初始化状态和 “handlers” 对象传递给它。这样，我们就可以通过使用 Wrangler 所定义的动作，实现一个新的 reducer 映射操作。
创建 slice
------ - -------- - ---- -----------------
----- ------------- - ----------------------
----- --------
------------- -
---------- ---
--
--------- -
-------- ------- - ------- -- -- --
---------
---------- -------------------- ---------
---
----------- ------- - ------- -- -- --
---------
---------- ----------------------------- -- ------- --- ------------
---
----------- ------- - ------- -- -- --
---------
---------- -------------------------- --
------- --- ---------- - - -------- ---------- - - ----
--
---
--
---
------ ----- - -------- ----------- ---------- - - ----------------------
------ ------- ----------------------在这个例子中，我们使用 Wrangler.createSlice 函数，它需要包含 name、initialState 和 reducers 三个属性。这个函数将在存储中创建一个名为 todos 的切片记录，然后返回一个包含 actions 和 reducer 的对象。
结论
Redux-wrangler 让您可以使用关于处理动作和 reducers 的最佳实践。总体而言，这个库大量减少了 Redux 的代码量。 如果你想节约时间，又想驾驭 Redux，请使用 Redux-wrangler。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/6005768081e8991b448eaa17