在现代 Web 应用中，前端的状态管理显得越来越重要。Redux 是一个可预测的状态容器，它是一个很好的选择来帮助我们管理状态。但是，只使用 Redux 并不意味着我们就能够建立适当的状态管理体系。本文将介绍基于 Redux 的状态管理最佳实践，帮助你建立一个可维护、可扩展且易于测试的状态管理体系。
1. 单一职责原则
在 Redux 中，我们应该遵循“单一职责原则”。这意味着我们的 reducer 应该只管理一个独立的状态片段。这种方式将容易理解，并使我们的代码更加易于维护。
-- -------------------- ---- -------
-- ---
-------- ------------- - --- ------- -
------ ------------- -
---- --------------
------ -
---------
-------- -----
--
---- ------------
------ -
---------
------ -------------
--
--------
------ ------
-
-
-- ----
-------- -------------------- - ------ ------- -
------ ------------- -
---- --------------
------ -----
---- -------------
------ ------
--------
------ ------
-
-
-------- ------------------ - ----- ------- -
------ ------------- -
---- ------------
------ -------------
--------
------ ------
-
-
----- ----------- - -----------------
---------- ---------------
------ -------------
---2. 分离副作用
Redux 的 reducer 不应该管理任何有副作用的行为，如发起网络请求或访问浏览器特定的 API。相反，我们应该从 reducer 中分离副作用行为，并使用 middleware 进行处理。
-- -------------------- ---- -------
-- ---
-------- ------------- - --- ------- -
------ ------------- -
---- --------------
----- ----- - ----- --------------------
------ -
---------
------
--
--------
------ ------
-
-
-- ----
-------- ------------- - --- ------- -
------ ------------- -
---- ----------------------
------ -
---------
------ -------------
--
--------
------ ------
-
-
-------- ------------ -
------ ----- ---------- -- -
----- ----- - ----- --------------------
---------- ----- ---------------------- ----- ---
--
-3. 使用 Action Creator
Action Creator 是一个简单的函数，用于创建 action 对象并将其分派到 Redux store 中。使用 action creator 可以使代码更加干净明了，并遵循 “单一职责原则”。
// bad
store.dispatch({ type: 'SET_FILTER', filter: 'status' });
// good
function setFilter(filter) {
return { type: 'SET_FILTER', filter };
}
store.dispatch(setFilter('status'));4. 避免使用嵌套数据结构
尽可能地避免使用嵌套数据结构，如嵌套对象或数组等。在 Redux 中，嵌套数据结构会导致状态的更新变得复杂和困难。相反，应该使用扁平的数据结构。
-- -------------------- ---- -------
-- ---
-
------ -
----- -
-- - --- -- ----- -------- ---- -- --
-- - --- -- ----- ------ ---- -- -
--
------- --- --
-
-
-- ----
-
------ -
- --- -- ----- -------- ---- -- --
- --- -- ----- ------ ---- -- -
-
-5. 使用 Reselect 进行状态选择
Reselect 是一个非常有用的库，它提供了一种选择我们存储在 Redux 中的数据的轻量级方式。重要的是，Reselect 使用了类似缓存的技术来避免不必要的计算。这使我们能够创建优化的，高效的状态选择器。
-- -------------------- ---- ------- -- --- ----- ------------- - ------- -- ------------ ----- -------------------- - ------- -- ------------------- ----- --------------------- - ------- -- - ----- ----- - --------------------- ----- ------ - ---------------------------- ------ ------------------- -- ----------- --- -------- -- -- ---- ------ - -------------- - ---- ----------- ----- ------------- - ------- -- ------------ ----- -------------------- - ------- -- ------------------- ----- --------------------- - --------------- -------------- --------------------- ------- ------- -- ------------------- -- ----------- --- ------- --
总结
Redux 可以帮助我们管理前端状态，但是只使用 Redux 并不意味着我们能够建立适当的状态管理体系。通过以上最佳实践，你可以建立一个可维护、可扩展、易于测试和解耦的状态管理体系，同时保持代码干净、清晰明了。无论你是使用 Redux，还是其他的状态管理库，这些实践都会对你的状态管理体系产生积极的影响。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/645b5651968c7c53b0dae958