在前端开发中，我们经常需要创建大型应用，这类应用极其复杂和庞大，很容易出现代码失控的问题。Redux 是一种流行的状态管理工具，它可以帮助我们更好地维护这类应用代码。在这篇文章中，我将会分享一些在实际工程实践中使用 Redux 的经验和技巧。
为什么选择 Redux？
使用 Redux 作为状态管理器的好处在于它提供了可预测性的状态管理，将应用的状态存储在一个单一的 store 中。这意味着，当我们需要对状态进行更改时，不仅仅是对 store 中的值进行更改，还需要对 store 相关的 reducer 进行处理，确保状态的一致性。这种方式能够避免一些隐藏的问题，在整个应用的生命周期中保证了状态的行为。
因此，Redux 成为了维护大型应用的首选工具，但是在实践中，我们也需要运用一些技巧来确保应用的稳定性和可维护性。
Redux 工程实践
下面是一些在实际工程实践中使用 Redux 的技巧和建议。
组件设计
在组件设计方面，我们需要确保组件的功能单一，同时最小化组件的状态。例如，我们可以使用 React 中的无状态组件或者函数式组件，确保不使用组件自身维护状态。同时，我们也应该尽可能避免组件之间进行直接数据传递，而是依赖 Redux 中 store 的状态来传递数据。
例如，下面是一个无状态组件的例子：
-- -------------------- ---- -------
------ ----- ---- -------
------ - ------- - ---- -------------
-------- ----------- -
------ -
-----
----- --------------- ------
---- ---------------- -----
------
-
-
-------- ---------------------- -
------ -
----- ----------
-
-
------ ------- ------------------------------在这个例子中，我们使用了 React 的无状态组件，并且使用了 Redux 中的状态来渲染组件，保证了组件的单一功能。
Reducer 和 Actions 的设计
在 Redux 的工程应用中，我们需要遵循一定的 reducer 和 actions 的设计规则：
- Reducer 中的操作应当是纯粹的，即不会更改 store 中的值，而是返回一个新的值。
- Actions 应该尽可能避免在 payload 中携带 Promise、Function 等副作用相关的内容，这些数据应当留给 Series 或者 Effects 来处理。
下面是一个 reducer 的简单示例：
-- -------------------- ---- -------
----- ------------ - -
------ -
-
----- ------------ - ------ - ------------- ------- -- -
------------------- -
---- ------------------
------ -
---------
------ ----------- - -
-
---- ------------------
------ -
---------
------ ----------- - -
-
--------
------ -----
-
-
------ ------- ------------在这个 reducer 示例中，我们使用了 spread operator 将 state 中的值解构出来，并在操作过程中返回了一个新的值，保证了 reducer 的纯粹性。
异步 Action
在实际开发中，我们很容易会遇到一些异步操作，例如获取远程数据或执行一个定时异步任务。在这个时候，我们需要用到 Redux 中的 Redux-thunk 或 Redux-saga。这两个库都提供了解决异步问题的方案，但是在实践中我们需要选择一个合适的库。
下面是一个 Redux-thunk 的简单示例：
-- -------------------- ---- -------
------ ----- ---- -------
------ ----- --------- - -- -- -
------ -------- -- -
--------------------------
------ ----------------------
--------- -- -
------------------------------------
------ --------
--
------------ -- -
---------------------------------
--
-
-
------ ----- -------------- - -- -- --
----- ------------------
--
------ ----- ---------------- - ---- -- --
----- ---------------------
-------- - ---- -
--
------ ----- ---------------- - ----- -- --
----- ---------------------
-------- - ----- -
--在这个示例中，我们使用了 Redux-thunk 中的 dispatch 函数来处理异步请求，并在其中 dispatch 了一个 action 来更新 store 中的状态。最终在我们组件中使用 mapStateToProps 来获取 store 中的值并显示。这样我们使用了异步请求来获取数据，同时也保持了代码的可维护性和清晰性。
监听不同路由钩子变化
在实际项目中，我们经常会遇到需要监听路由钩子变化的情况，例如在进入特定路由时需要更新 store 中的状态。为了实现这个功能，我们可以使用 react-redux 的 withRouter 函数来包装我们的组件，并在其中使用 componentDidUpdate 实现路由钩子的监听。
下面是一个监听路由钩子的简单示例：
-- -------------------- ---- -------
------ ----- ---- -------
------ - ---------- - ---- ------------------
----- ----------- ------- --------------- -
----------------------------- -
-- -------------------- --- ------------------- -
-------------------------
--------- -----------
------ - ----- ------------------- -
--
-
-
-------- -
------ -------- ----------------
-
-
------ ------- -----------------------在这个示例中，我们使用了 withRouter 函数来将我们的组件包装起来，并在 componentDidUpdate 中检查路由钩子的变化。在检测到钩子变化的时候，我们使用 history.push 函数来改变路由，并将 state 传递到 store 中，保证应用的状态在路由切换中的一致性。
结论
通过使用 Redux，我们可以更好地维护大型应用的代码，而且通过一些技巧和合适的设计规则，我们可以保证代码的可维护性和可扩展性。在实践中，我们需要使用合适的库来处理异步请求，并在需要的时候监听路由钩子变化。这篇文章提供了一些实际工程实践中使用 Redux 的经验和技巧，希望能对读者有所帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/672b4351ddd3a70eb6d25347