Redux 是一种用于管理 JavaScript 应用程序状态的开源 JavaScript 库。它可以让您以可预测的方式编写应用程序，并容易地测试和调试。Redux 是一个非常流行的前端框架，许多公司和项目都在使用它。在本文中，我们将介绍 Redux 的三大原则及其实践方式，帮助您更好地理解和使用 Redux。
三大原则
单一数据源
Redux 通过将整个应用程序状态存储在单个对象中来实现单一数据源。这个对象被称为“store”，它是一个不可变对象，只能通过发出“actions”来更新。这样做的好处是可以更容易地追踪应用程序的状态，并且可以更容易地实现时间旅行和撤消 / 重做功能。
示例代码：
-- -------------------- ---- -------
----- ------------ - -
------ -
--
-------- ------------- - ------------- ------- -
------ ------------- -
---- ------------
------ - ------ ----------- - - --
---- ------------
------ - ------ ----------- - - --
--------
------ ------
-
-
----- ----- - ---------------------状态不可变
Redux 的第二个原则是状态不可变。这意味着不能直接修改状态，而是必须创建一个新的状态对象。这样做的好处是可以更容易地追踪状态的变化，避免了出现意外的副作用，并且可以更容易地实现时间旅行和撤消 / 重做功能。
示例代码：
-- -------------------- ---- -------
-------- ------------- - --- ------- -
------ ------------- -
---- -----------
------ ---------- - --- ---------- ----- ------------ ---------- ----- ---
---- --------------
------ -------------- --
------- --- --------- - - -------- ---------- --------------- - - ----
--
--------
------ ------
-
-状态修改由纯函数完成
Redux 的第三个原则是状态修改由纯函数完成。这意味着 reducer 函数必须是纯函数，即给定相同的输入，必须始终产生相同的输出，而且没有任何副作用。这样做的好处是可以更容易地追踪状态的变化，也可以更容易地测试和调试 reducer 函数。
示例代码：
-- -------------------- ---- -------
-------- ------------- - --- ------- -
------ ------------- -
---- -----------
------ ---------- - --- ---------- ----- ------------ ---------- ----- ---
---- --------------
------ -------------- --
------- --- --------- - - -------- ---------- --------------- - - ----
--
--------
------ ------
-
-实践方式
创建 store
要使用 Redux，首先需要创建一个 store。Redux 提供了一个 createStore 函数，它接受一个 reducer 函数作为参数，并返回一个 store 对象。
示例代码：
-- -------------------- ---- -------
------ - ----------- - ---- --------
----- ------------ - - ------ - --
-------- ------------- - ------------- ------- -
------ ------------- -
---- ------------
------ - ------ ----------- - - --
---- ------------
------ - ------ ----------- - - --
--------
------ ------
-
-
----- ----- - ---------------------发出 actions
要更新 store 中的状态，需要发出 actions。一个 action 是一个普通的 JavaScript 对象，它必须包含一个 type 属性，用于指示要执行的操作。除了 type 属性之外，action 对象可以包含任何其他属性。
示例代码：
const incrementAction = { type: 'INCREMENT' };
const decrementAction = { type: 'DECREMENT' };
store.dispatch(incrementAction);
store.dispatch(decrementAction);监听状态变化
要在 store 中的状态发生变化时做出反应，需要监听 store 的变化。Redux 提供了一个 subscribe 方法，它接受一个回调函数作为参数，每当 store 的状态发生变化时就会调用该回调函数。
示例代码：
function handleStateChange() {
console.log(store.getState());
}
store.subscribe(handleStateChange);结论
Redux 是一个非常有用的前端框架，它可以帮助您管理应用程序状态，并使您的代码更可预测和易于维护。在本文中，我们介绍了 Redux 的三大原则和实践方式，希望能够帮助您更好地理解和使用 Redux。如果您想深入了解 Redux，请查看 Redux 官方文档。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6744208ff3dd653032a40356