当我们开发团队协作的前端项目时，面临如何统一管理组件间的共享状态的问题。针对这个问题，Redux 大受欢迎。Redux 在实现共享状态管理的同时，让代码更易于维护和测试，本文将详细探讨优雅使用 Redux 的共享状态管理。
什么是 Redux
Redux 是一种 JavaScript 状态容器，专门用于共享状态的管理。在 Redux 中，所有的状态都被存放在一个单一不可变对象中。这个不可变对象称为 Store，而且它是单向数据流的。
对于一个 Redux 应用，我们先定义一个 store，这个 store 包含应用中所有数据状态，然后我们创建 actions 来描叙用户如何触发应用中的状态修改，最后我们定义 reducers 来处理 actions 的信息并更新状态。每当应用状态发生变化，所有关联的组件都会重新渲染。
Redux 的优势
Redux 有什么优势，为什么它能被广泛使用我们分下面四点来分别阐述。
大型项目的可预测性
在 Redux 中，每一个状态都是被一个特定 reducer 所处理的。这种按需处理的方法可以更好的规范项目状态的变更，有效避免繁琐而不必要的状态模糊。同时，Redux 工作流程中的那些公共组件、函数，遵循统一的顺序和格式，使得代码更易于维护和开发。
开发过程中方便调试
在 Redux 中，Store 具有明确的状态树。如果要查看状态的历史记录，只需要打开 Redux DevTools。我们可以在时间轴上快速查找状态的更新，从而更容易找到发生问题的点。Redux DevTools 还提供了更丰富的调试信息，如当前的状态和用户的 actions。
代码的可测试性
Redux 非常适合单元测试启发式的、基础的测试，便于测试人员进行白盒测试。因为它将所有的可变状态集中管理，并通过 reducers 去修改状态，所以每个 reducer 都可以单独测试。这些测试不需要渲染组件，因为它们只关注数据的处理，提高了测试的速度和准确性，并通过测试来减少 bug 的出现。
组件的解耦性
在 Redux 应用中，组件是轻量级状态的管道。每个组件只需要专注于自己的状态的渲染，不需要关心其他组件的数据。Redux 可以在应用的各个部分共享数据状态，而不是将状态存储在特定的组件中。这种情况下，对于不同的组件，它们之间没有紧密的耦合关系，便于维护和优化代码。
Redux 的缺点
Redux 是一种很优秀的前端状态管理方案，但是它并不适合所有的项目。我们来分析一下它的一些缺点。
学习曲线陡峭
学习 Redux 需要更高级的 Javascript 技能，并且在理解和使用 Redux 常见模式的同时需要更多时间。因此，对于一些 web 开发新手来说，他们可能还没有理解局部状态概念，可能需要花费很大努力来理解这种全局状态的管理模式。
为较小应用带了不必要的开销
Redux 在处理复杂应用方面表现极佳，但对于小型应用来说，可能会产生不必要的开销。对于简单的 UI，使用局部状态应该是首选方案。
Redux 的最佳实践
下面是一些在 Redux 常用场景下具有可复用性的实践建议。
不管如何，请使用 Redux 规范化管理应用的状态！
在 Redux 中使用规范化，则可以保持状态的最小化，并增大状态的复用率，同时也容易更新数据，可读性更高，并且能够更好的组织数据。因此，如果您正在编写大型的 Redux 应用，一定要使用规范化来管理您的数据状态！
为您的 Redux 应用状态设计清晰的结构
应将状态值分解为可预测式的数据，并按应用程序特性组织应用程序的 Redux Store。保持存储过程简单而有效，从而简化流程的管理。为了更好地组织 Store 中的状态，我们可以对 Store 中的状态进行结构设计，形成多个小的状态片段，并使其易于拆分和组合。
Redux-thunk 是一种更好的异步解决方案
Redux-thunk 允许您以轻松且可预测的方式执行异步请求，并使其更易于测试和封装。与 Redux-promist 或其他类似方案相比，Redux-thunk 支持更多的异步 action 功能，减少了代码量，让你的代码更整洁优美。
不要重复使用 reducers
当您重用以前的 reducers 代码时，您很可能会降低代码的可读性，并导致更高的维护成本。应该按照不同的 reducer 功能来写不同的 reducer，以达到更好的代码复用。
Redux 在 React 中的实践
Redux 与 React 的配合可以让应用以更高效且高度一致的方式运行。下面是一个简单的实例来展示 Redux 如何在 React 中使用。
-- -------------------- ---- -------
------ ----- ---- --------
------ --------- ---- --------------
------ ------- ---- ---------------------------
-- -- ----- - -----
----- --------------- - ----- -- --
------ ------------
---
-- -- ------ - -----
----- ------------------ - -------- -- --
-------- ---- -- --------------------------------
---
-- ---- --- --
----- ------- - -- ------ ------- -- -- -
--
--------- ------------- --
------------ ------------------ --
---
--
-- -- ----- - ------ ---
------ ------- ------------------------ -----------------------------通过上面的实例，我们可以了解到如果在 React 中使用 Redux。这段代码注重于两个方面，mapStateToProps 和 mapDispatchToProps。mapStateToProps 将 Redux store 与一个特定的组件进行绑定，而 mapDispatchToProps 则定义 Redux action creator，它需要加工一个组件，这个组件涉及到从 store 获取 state 以及向 store 分发 actions。
结论
Redux 是一种适合管理大型，具有结构化数据的前端项目的优秀工具，但并不是适合所有项目。使用 Redux，可以有效地管理项目中的共享状态和可预测的数据流。同时，Redux 可以让团队更轻松的协作，便于测试和维护。
在实际开发过程中，旨在帮助您了解如何制定 Redux 规范，并遵守这些规范。但这并不是说规范化必须是 Redux-purist 的遵循。最终我们需要的是运用最合适的方案，按照项目特点，遵从可读性、可维护性和可测试性等规则去开发。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/676e7821e9a7045d0d6a6001