什么是 Redux
Redux 是一种 JavaScript 应用程序的状态容器，它可以管理应用程序的状态并控制它们是如何被处理的。Redux 非常适合于大型应用程序，因为它可以帮助开发者更好地组织和维护应用程序的代码。
在 Redux 中，数据流向是单向的：从视图（即用户操作）到 action，再到 reducer，最后到 store。下面就让我们逐一了解每一个流程。
数据流程
视图
Redux 数据流程的开始就是视图。视图层通过用户操作（例如按钮点击或者输入框输入）来发起一个 action。
action 是一个带有识别信息和有效载荷的 JavaScript 对象。它只描述了发生了什么，但是没有具体的实现。它们显示了一个事件所对应的类型，并且传递给 reducer 进行处理。
例如，当用户单击增加按钮：
const increaseButton = () => { return { type: 'INCREASE_COUNT' } }
Action
Action 的主要目的是发出指令，改变状态（state）的唯一途径就是通过 dispatch 发布一个 action。
Action 只是一个描述文件，它描述了一个事件对于应用的状态改变。
对应的 reducer 就会根据这个 action 的 type，进行相应的状态的更新。
例如，在单击增加按钮时，将会执行 INCREASE_COUNT 的 action，这个 action 将告诉 reducer 状态要加 1：
Reducer
Reducer 是一个纯函数，它接受现有的状态和一个 action，然后返回新的状态。Reducer 的职责是处理 action 并更新应用程序的状态。
Reducer 将不同的 Action 分类进行处理，并通过返回新的状态来反馈给 Redux Store。
例如，当收到 INCREASE_COUNT action 时，reducer 将会让状态加 1：
const countReducer = (state = 0, action) => { switch (action.type) { case 'INCREASE_COUNT': return state + 1 default: return state } }
Store
Store 将处理过的 state 保存，并在视图中被访问到。Action 是通过 Store.dispatch() 方法发起的，Store 将通过 Reducer 来更新应用程序的状态。Store 是纯粹的 JavaScript 对象，保存了应用程序的 state。
例如，将 countReducer 放入 Store 中：
import { createStore } from 'redux' import countReducer from './reducers' const store = createStore(countReducer)
现在，我们已经在 Redux Store 中设置了状态，重要的是如何在项目中使用它。
应用状态的维护技巧
Redux 提供了一种可以管理应用的全局状态的约定方式，这使得你可以清楚的知道状态发生了什么，并且在整个应用程序中保持一致性。
避免过多的嵌套
当你使用一个庞大的 Redux 状态时，你可能会开始看到一些嵌套胡同。你可以使用分离的 reducer，但有时你需要管理并且更新多个数据源，这就是一个非常麻烦的问题。
例如，一个有人员组织结构的应用程序，我们需要保存每个雇员的详细信息和部门的详细信息：
-- -------------------- ---- ------- ----- ------------ - - ---------- - - ----- ------- ----------- -------- ------ ------- ----- ---------- -- - ----- ------ ----------- ---------- ------ ---------- -------- - -- ------------ - - ----- ------- -- - ----- --------- - - - ----- ------------------- - ------ - ------------- ------- -- - -- --- -展开代码
这将使状态看起来十分复杂，因此我们可以将每个子状态分成单独的 reducer。然后我们可以将它们组合成一个大型的 reducer，以帮助我们完成整个数据源的维护。
例如，我们可以将 reducer 拆分为3个子状态管理器：employees、departments 和 organization：
-- -------------------- ---- ------- ----- ---------------- - ------ - --- ------- -- - ------ ------------- - ---- --------------- ------ ---------- - --- ---------- ----------------- -- ---- ------------------ ------ -------------- -- ---- --- ---------- ---- ------------------ ------ ----------- -- ---- --- --------- - - ----- ----------------- - - -- -------- ------ ----- - - ----- ------------------ - ------ - --- ------- -- - -- --- - ----- ------------------- - ----------------- ---------- ----------------- ------------ ------------------ --展开代码
现在，我们将 employeeReducer 独立作为一个子状态管理器，这使我们可以更好地维护员工信息的修改。同样，我们也可以更细致地管理部门信息的修改。
将状态进行拆分
如果你的状态看起来非常长，你可能想要考虑将它拆分成更小的子状态。
例如，我们的应用程序可能已经包含了几个状态：用户信息（User）、过滤器（Filter）、分页（Pagination）和 雇员信息（Employee）：
-- -------------------- ---- ------- ----- ------------ - - ----- --- ----------- --- ------- --- --------- --- -------- - ------ ----- --------- ---- - -展开代码
我们可以根据子状态的类型，将主状态分解成更多的子状态：
-- -------------------- ---- ------- ----- ----------- - ------ - --- ------- -- - ------- - ----- ----------------- - ------ - --- ------- -- - ------- - ----- ------------- - ------ - --- ------- -- - ------- - ----- --------------- - ------ - --- ------- -- - ------- - ----- -------------- - ------ - --- ------- -- - ------ ------------- - ---- ---------------- ------ - --------- ------ ---- - ---- ---------------- ------ - --------- ------ ----- - ---- -------------------- ------ - --------- --------- ---- - ---- -------------------- ------ - --------- --------- ----- - -------- ------ ----- - - ----- ---------- - ----------------- ----- ------------ ----------- ------------------ ------- -------------- --------- ---------------- -------- -------------- --展开代码
这个方法可以减小代码的复杂度，也可以更好地管理和维护你的应用程序。
使用 combineReducers
combineReducers 负责将多个 reducer 合并成一个 reducer，它的核心工作是通过依次执行多个 reducer 并合并他们的结果。combineReducers 非常适合管理多种状态，例如上面提到的 User、Filter、Pagination 和 Employee。
例如，我们将 User、Filter 和 Employee 合并到一个 Reducer 中：
const appReducer = combineReducers({ user: userReducer, filter: filterReducer, employee: employeeReducer })
我们已经按类型将大型的状态拆分成了多个子状态，现在我们可以使用 combineReducers() 函数即可将它们合并成一个单一的状态。
示例代码
以下是对应示例代码，基于这个示例，你可以更好地理解 Redux 数据流程：
-- -------------------- ---- ------- ------ - ------------ --------------- - ---- ------- -- ------- ----- --------------- - -- -- -- ----- ------------------ -- -- -------- ----- -------------- - ------ - -- ------- -- - ------ ------------- - ---- ------------------- ------ ----- - - -------- ------ ----- - - ----- -------- - ----------------- -------- -------------- -- -- ----- ----- ----- - --------------------- -- --------- -- ----- ------- ------------------ -- - ----------------------------- -- -- -------- ------- --------------------------------- ---------------------------------展开代码
输出
1 2
总结
Redux 是一个非常强大且灵活的状态容器。在实际项目使用中，当应用程序状态变得非常复杂时，应该进行状态拆分，并将其分为多个子状态管理器，这使得每个部分都能更好地聚焦于其任务。
重要的是，理解整个数据流程，这将使你在应用中更清晰地管理状态、更好地组织代码和更轻松地更新状态。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/65a1d2d4add4f0e0ff9da372
