从 Flux 到 Redux 后，我学到的
在前端开发中，管理状态一直是一个重要的议题。Flux 和 Redux 是两种非常流行的 JavaScript 状态管理库。它们可以帮助我们轻松地跟踪和管理应用程序状态，使我们可以轻松地编写可维护的应用程序。今天，我将分享我从 Flux 到 Redux 过程中的一些心得体会，并提供一些示例代码以帮助您更好地理解这些概念。
Flux
Flux 是一种管理状态的体系结构，Web 开发人员可以使用它来更新应用程序的状态并通知相关 UI 组件进行相应的更新。Flux 是单向数据流的，这意味着唯一的数据来源是存储库（store），它将所有的应用程序状态保存在一个地方，并允许我们通过发送行动（action）来更新它。这种模式有助于强制我们按照某个顺序进行代码的处理，并减少不必要的副作用。下面是一个简单的 Flux 应用程序示例：
-- ---------
----- ------------ - -
---- ------
--------- ----------
--
-- -------
----- -------------- - -
---- -- -- --
----- ----------------
---
--------- -- -- --
----- ---------------------
--
--
-- -----
----- ------------ - ------------------ - -- ------- -- -
------ ------------- -
---- -----------------
------ ----- - --
---- ----------------------
------ ----- - --
--------
------ ------
-
---
-- ---------
----- ------- ------- --------------- -
------------------ -
-------------
---------- - -
-------- -----------------------
--
-
------------------- -
---------------- - ------------------------- -- -
--------------- -------- ----------------------- ---
---
-
---------------------- -
-------------------
-
-------- -
------ -
-----
-----------------------------
------- ----------- -- ---------------------------------------------
---
---------
------- ----------- -- --------------------------------------------------
--------
---------
------
--
-
-
------------------------ --- ---------------------------------上述代码示例使用了 createStore 函数创建了一个存储库（store），它将应用程序状态保存在一个地方。在组件内部，我们使用 unsubscribe 函数来取消订阅订阅后在更新过程中执行的 store.subscribe 函数。此代码示例演示了如何将动作（action）分发给存储库，并将对象传递给它来更新应用程序的状态。这是一个简单但有效的 Flux 状态管理器示例。
Redux
在 Flux 的基础上，Redux 是一个强化版状态管理库。Redux 解决了一些 Flux 模式的问题并引入了一些新的特性：例如，Redux 提供了时间旅行调试功能，可以让我们查看应用程序状态的历史记录，并回滚到先前的状态。Redux 本质上是一个 flux 模式，它是基于单一的应用程序状态对象来管理状态的，它的状态管理模式非常直接。这是一个 Redux 应用程序示例：
-- ---------
----- ------------ - -
---- ------
--------- ----------
--
-- -------
----- -------------- - -
---- -- -- --
----- ----------------
---
--------- -- -- --
----- ---------------------
--
--
-- --------
----- --------------- - ------ - -- ------- -- -
------ ------------- -
---- -----------------
------ ----- - --
---- ----------------------
------ ----- - --
--------
------ ------
-
--
-- -----
----- ----- - -----------------------------
-- ---------
----- ------- ------- --------------- -
-------------------- -
---------------- - ------------------ -- -
-------------------
---
-
---------------------- -
-------------------
-
-------- -
------ -
-----
---------------------------
------- ----------- -- --------------------------------------------------
------- ----------- -- -------------------------------------------
--------
---------
------
--
-
-
------------------------ --- ---------------------------------上述代码示例介绍了 Redux 应用程序的结构，其中 store 由 reducer 处理函数组成，这是负责在应用程序状态更改过程中执行状态转换的函数。在组件中，我们使用 subscribe 函数来订阅存储库，并在回调中强制更新，这使得在更改存储库中的状态时，组件会自动更新。
从 Flux 到 Redux 的过渡
理解 Flux 模式和 Redux 框架的主要区别是十分重要的，因为它们之间有很多的相似性，但是 Redux 它提供了很多更鲜明的优点，使得应用开发更加的高效。在成为 Redux 的高手之前，您必须理解单向流动和状态不变的重要性。此外，我还发现使用 ES6 和函数式编程技术可以让代码更简洁、可读性更强。最后，在学习 Redux 中的一些工具时，比如 middleware、action creators 和 combineReducers，我发现这些工具可以提高生产力，并帮助您更好地组织代码。
总结
Flux 和 Redux 都是优秀的状态管理库，它们可以帮助我们管理应用程序中的状态。使用 Redux 在实际项目中的时候除了会用到其提供的状态管理的方案，我们还需要时刻考虑到其提议下的思想，如单向数据流、不可变数据、纯函数等等这些概念。在应用 Redux 的过程中，请确保您已经理解了核心概念，并使用设计的最佳实践。您可以通过尝试一个 Flux 或 Redux 应用程序，以便更好地了解这些概念和模式，并学习如何使用它们来管理 Web 应用程序中的状态。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/64ace8a248841e98948f9ac9