简介
redux-values 是一个基于 Redux 的状态管理库，在处理应用状态中的对象值时非常有用。它提供了一种简单的方式，将“对象值”作为 redux actions 发送，从而在应用状态中动态地创建和更新对象值。
在本教程中，我们将使用 redux-values 来创建一些简单的对象值并将它们添加到 Redux store 中。
安装
使用以下命令安装 redux-values 包:
npm install --save redux-values
or
yarn add redux-values
创建 redux-values 对象
要使用 redux-values，我们需要使用定义对象（defining object），该对象包含我们要在 Redux store 中存储的值。这个对象应该是普通对象，该对象的键（key）是每个对象值的名称，而值（value）是默认值或包含有关值的任何元数据的对象。例如：
const values = {
user: { id: null, name: '' },
todos: { list: [], status: 'loading' }
};在此例子中，我们定义了 user 和 todos 两个对象值。user 包含一个空字符串的名称和一个空值的 id 属性，todos 包含一个空数组的 list 属性和状态为 loading 的 status 属性。
创建 redux-values 动作处理器
接下来，我们需要将 redux-values 与 Redux store 集成。这包括创建动作处理器（reducer），将它们添加到 store 中，并创建动作（actions）来更新和访问保存的值。
我们首先需要创建一个函数（action creator），它允许我们创建一个新的对象值。为了创建动作（action），我们需要传入一个参数，该参数是在定义对象中创建的对象值的名称。例如，对于上述代码中的'user' 值，我们可以创建以下函数：
import { createValuesAction } from 'redux-values';
const setUser = createValuesAction('user');createValuesAction 函数返回一个函数，该函数接受一个新值（new value）参数，并创建一个更新给定对象值的动作。
将动作处理器添加到 Redux store
我们现在可以创建我们的动作处理器了。 它应该是一个普通的 Redux 动作处理器，它正确地更新我们定义的对象值。 如果您不熟悉 Redux 动作处理器，请阅读官方文档
以下是我们的示例动作处理器：
import { handleValues } from 'redux-values';
import values from './values';
const INITIAL_STATE = {};
export default function valuesReducer(state = INITIAL_STATE, action) {
return handleValues(state, values, action);
}您会注意到我们传入了一个名为 values 的对象。它就是我们在前一步定义的那个 values 对象。
我们将调用 handleValues 函数来更新 redux state，这个函数接收三个参数：
state: 当前状态values: 包含要管理的对象的定义对象action: 发送的动作（通常是一个 Reducer 函数中的参数）
我们的 reducer 维护一个INITIAL_STATE 变量，该变量是一个包含我们的对象值的所有键的空对象。 在这里，我们使用 handleValues 函数来处理此值。
该处理器将返回一个新状态（next state），其中的键（key）是定义对象中键的名称，而值（value）是在动作中更新的值。
创建新动作处理器的例子
使用 setUser 做例子，演示如何使用 redux-values 来创建和更新应用程序状态。
首先，我们需要将 setUser 函数添加到我们的 mapDispatchToProps 中：
import { setUser } from './actions';
function mapDispatchToProps(dispatch) {
return {
updateUser: (newUser) => dispatch(setUser(newUser)),
};
}现在，我们可以将 user 对象值添加到 Redux store 中：
-- -------------------- ---- -------
------ ----- ---- --------
------ - ------- - ---- --------------
------ - ---------- - ---- -----------------------
-------- ------ ----- ---------- -- -
------ -
-----
------ ----------------- ------------- -- ------------ ----- -------------- --- --
------- ----------- -- ------------ --- -- ----- ----- ------- -- ------------
------
--
-
----- --------------- - ------- -- --
----- ------------------
---
------ ------- ------------------------ - ---------- ---------该代码定义了一个 React 组件，在其中我们可以使用更新对象值的两种方法：
- 通过在用户输入时更新
user.name（利用 React 的双向数据绑定，每次输入都会通过props传递给User组件） - 点击按钮并将
user.id和user.name更新为{ id: 1, name: 'Bob' }
我们通过 connect 来获取 store 中的值并将它们传递到 组件的 props 中。
最后，我们传递了 updateUser 函数到组件的 props 中，使得 React 组件能够使用它来更新 user 对象值。
总结
在本文中，我们介绍了如何使用 redux-values 来管理应用程序状态中的对象值。我们创建了一个定义对象，处理器和动作（actions），并演示了如何更新和访问这些对象值。
redux-values 提供了一种可靠的方式，将包含对象值的应用程序状态集成到 Redux store 中。借助 redux-values，提供功能强大且易于维护的状态管理系统，增加了应用程序的可扩展性，同时减少了后续的维护成本。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60067012e361a36e0bce8da6