前言
在前端开发中，多视图层次结构的管理可能是一项非常棘手的任务。为了使所有视图结构都能够与 Redux 中的状态保持同步，我们必须决定如何组织 reducer、action 和 store，并且需要制定一套可扩展的架构以方便我们在将来添加新的视图层次结构。
在本文中，我们将研究这些问题，并提出了一种适用于管理多个视图层次结构的可扩展 Redux 架构。
理解 Redux
在探究如何管理多个视图层次结构之前，需要先了解 Redux。
Redux 简介
如果您还不熟悉 Redux，它是一种用于管理应用程序状态的 JavaScript 库。它将整个应用程序状态储存在一个单一对象中，并且使用纯函数来更新这个状态。
Redux 使您的应用程序状态易于跟踪和调试。与 MVC 模型不同，它不依赖于轮询来检查数据变化，而是依靠数据流管道将数据从视图层传递到模型层来进行实时通信。 Redux 中所有数据变更都是通过结构化的 Action 经过 Reducer 处理的。
Redux 同时有效地解决了数据传递问题，因为你不需要在组件之间传递状态。 当您在Redux Store 中改变状态时，所有需要这个状态的组件将随之自动更新。 与 Flux 模式类似，Redux 的独立性使框架应用广泛。
Redux 的核心元素
Action
要更新应用程序状态，您必须先创建一个 Action。一个 Action 是一个包含类型和数据的 JavaScript 对象。例如：
{ type: 'ADD_TODO', data: { id: 1, text: 'Learn Redux' } }
Reducer
Reducer 是一个用于管理应用程序状态变化的纯函数。它接收当前的状态和一个 Action 对象作为参数，并返回更新的状态。例如：
-- -------------------- ---- ------- -------- ----------------- - --- ------- - ------------------- - ---- ----------- ------ - --------- ----------- -- -------- ------ ------ - -展开代码
Store
Redux 应用程序的状态储存在 Store 中。它是一个 JavaScript 对象，包含一个与应用程序状态结构匹配的数据状态树，并提供了一组用于访问、更新和监控状态变化的方法。创建 Store 的代码如下：
const store = createStore(todoReducer);
处理多个将视图层次结构放入 Redux Store 的方案
试想一个我们需要多个视图层次的复杂应用程序。如何将每个视图层次的状态管理到 Redux 的 Store 中？
答案是使用“分支”--为每个视图层次结构创建单独的 reducer 函数并将其添加到一个根 reducer 中。当 Store 对象收到 Action 时，所有 Reducer 都会被调用，每一个 reducer 都需要在 Action 对象中查找它们需要更新的状态部分，并返回一个新对象。
下面我们将解开一个包含了两个视图层次结构的例子。
首先，我们来定义我们需要管理的 State:
const initState = { view1: { counter: 0, }, view2: { counter: 0, }, };
现在我们定义一个 Reducer 函数：
-- -------------------- ---- ------- -------- ------------------ - ---------------- ------- - ------ ------------- - ---- ------------------- ------ - --------- -------- ------------- - -- -- -------- ------ ------ - -展开代码
-- -------------------- ---- ------- -------- ------------------ - ---------------- ------- - ------ ------------- - ---- ------------------- ------ - --------- -------- ------------- - -- -- -------- ------ ------ - -展开代码
我们还需要一个根 Reducer 将这两个 Reducer 合成一个：
const rootReducer = combineReducers({ view1: view1Reducer, view2: view2Reducer, });
现在我们就可以通过创建 Store 来储存所有的 State 数据：
const store = createStore(rootReducer);
我们还可以通过创建 action 来更新 State（Action应该是一个纯对象，内部至少有一个type属性)：
-- -------------------- ---- ------- ----- --------------- - - ----- ------------------ -- ----- --------------- - - ----- ------------------ -- -------------------------------- -------------------------------- ------------------------------ -- - ------ - -------- -- -- ------ - -------- -- -- - --展开代码
结论
在 Redux 中管理多个视图层次结构可能会比较困难，但是通过使用“分支”技术，每个视图层次结构都有自己的 Reducer 函数，并将它们合并到一个根 Reducer 中，以使它们都可以从 Store 中读取数据和写入状态。
在本文中我们探讨了 Redux 的核心元素 Action、Reducer、Store 以及如何实现任意视图层次的管理。相信通过本文您对于 Redux 的理解更加的深入,能够应对较为复杂应用中的问题，在项目实践中可以更好的应用 Redux 架构并进行更好的可维护性和可扩展性。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/67340f820bc820c58246355c
