1. 什么是 redux-setters
redux-setters 是一个 npm 包，可以帮助开发者更方便地管理 Redux store 中的状态。它是基于 Redux 的一种轻量级扩展，解决了 Redux 传统方式管理状态冗长的写法问题，并提供了更加简洁、易读的代码解决方案。
redux-setters 提供了一种简单的方式，让我们可以使用 setter 来更新 Redux store。这样，我们就可以把所有关于对 store 的操作，如获取、修改、更新及存储，都放在 setters 这个模块中，更少的代码量让我们看起来更加清晰明了。
2. 安装和使用
首先，使用 npm 安装 redux-setters
npm install redux-setters --save
然后，在 redux 应用的入口文件，使用 applyMiddleware 和 createSetters 中间件来扩展 redux：
import { createStore, applyMiddleware } from 'redux';
import createSetters from 'redux-setters';
// 创建 reducers
const reducers = combineReducers({...});
// 创建 store
const store = createStore(reducers, applyMiddleware(createSetters()));通过这种方式，我们已经成功扩展了 redux。现在，我们可以在任何 action 中使用 setters 来更新 store。
例如，在一个登录页面中，我们可以创建一个 setters.js 的文件。文件内容如下：
export function setUser(state, user) {
return { ...state, user };
}这将会创建一个 setter 函数，用于修改 store 中的 user 属性。在 action 中，我们只需要调用这个 setter 就可以更新 store，如下所示：
-- -------------------- ---- -------
------ - ------- - ---- ------------
-------- --------------- --------- -
------ -------- -- -
-- ------
---------------------- ----------------------- -- -
-- ------- ------- -- ----- -- ---- ---
---------------------------------
---
--
-这里需要注意，setters 接收的第一个参数 state，是一个 immutable 对象，不能被更改。它只能通过返回一个新的对象来更新 state。
3. 更进一步的示例
除了上面的例子外，redux-setters 还可以用在更复杂的场景中，如表单处理。在表单中，我们经常需要处理不同的输入，以及其它 UI 方面的状态。基于 redux-setters 的思想，我们可以将表单的 state 定义为一个对象，然后定义多个 setter 来更新表单的属性，如下所示：
-- -------------------- ---- -------
------ - ------------ - ---- ----------------
----- ------------ - -
--------- ---
--------- ---
----------- ------
------------- ------
------- --
--
------ ----- ------------ - ---------------
------ ----- ------------ - ---------------
------ ----- --------------- - ------------------
------ ----- ----------------- - --------------------
------ ----- ---------- - -------------
------ ----- ----------- - -------------------------- ------------
------ ----- ----------- - -------------------------- ------------
------ ----- ------------- - ----------------------------- --------------
------ ----- --------------- - ------------------------------- ----------------
------ ----- --------- - ------------------------ ----------
------ -------- ----------------- - ------------- ------- -
------ ------------- -
---- -------------
---- -------------
---- ----------------
---- ------------------
---- -----------
------ -
---------
------------- --------------
--
--------
------ ------
-
-在这个例子中，我们定义了一个 formReducer，负责更新表单状态。同时，我们还定义了多个 setter，用于更新表单的各个属性。例如，setUsername 将表单的 username 属性赋值为 action.payload。
在表单组件中，我们可以使用这些 setter 来更新表单属性和 store。例如：
-- -------------------- ---- -------
------ - ----------- - ---- ------------
----- --------- ------- --------------- -
-------- - -- -- -
----- - --------- --------- ---------- - - ----------------
----------------------------- --------- ------------
--
---------------- - ----- -- -
----- - ----- - - -------------
------------------------------
--
-------- -
----- - --------- --------- ---------- - - ----------------
------ -
----- -------------------------
------ ----------- ---------------- -------------------------------- --
------ --------------- ---------------- -------------------------------- --
------ --------------- -------------------- ---------------------------------- --
------- -----------------------------
-------
--
-
-
------ ------- --------
----- -- -- ----- ---------- ---
- ----------- -
-------------这样，我们就可以在表单中使用 setter，轻松地管理表单的状态。
4. 总结
通过使用 redux-setters，我们可以更方便、更简洁地管理 Redux store 中的状态。它让我们的代码更容易阅读和维护，并提高了开发效率。掌握 redux-setters，让前端开发者更加专注于业务逻辑的开发，而不是在写 state 内容上耗费太多的精力。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60067008e361a36e0bce8b2a