Redux 是一个流行的 JavaScript 应用程序状态管理库，它提供了一种可预测、可测试和可扩展的方式来管理应用程序的状态。Redux 的核心思想是将应用程序的状态存储在一个中央存储区中，并使用纯函数来更新该状态。在这篇文章中，我们将探讨 Redux 是如何使用观察者模式来实现状态的更新和通知的。
什么是观察者模式？
观察者模式是一种软件设计模式，它定义了一种一对多的依赖关系，当一个对象的状态发生改变时，所有依赖于它的对象都将自动得到通知。在观察者模式中，有两种角色：
- Subject（主题）：主题是被观察的对象，它维护了一个观察者列表，并提供了添加、删除和通知观察者的方法。
- Observer（观察者）：观察者是依赖于主题的对象，它定义了一个更新接口，使得主题在状态改变时能够通知观察者。
观察者模式的优点是解耦了主题和观察者之间的关系，使得它们可以独立地进行修改和扩展。同时，观察者模式也符合开闭原则，因为它允许新增观察者，而不需要修改主题的代码。
Redux 中的观察者模式
在 Redux 中，Store 是主题，而订阅 Store 的回调函数则是观察者。当 Store 中的状态发生改变时，它将自动通知所有的订阅者。
Redux 中的观察者模式可以通过以下步骤来实现：
1. 创建 Store
首先，我们需要创建一个 Redux Store，它将维护整个应用程序的状态。我们可以使用 Redux 的 createStore() 方法来创建一个 Store，如下所示：
-- -------------------- ---- ------- ------ - ----------- - ---- -------- ----- ------------ - - ------ - -- -------- ------------- - ------------- ------- - ------ ------------- - ---- ------------ ------ - ------ ----------- - - -- ---- ------------ ------ - ------ ----------- - - -- -------- ------ ------ - - ----- ----- - ---------------------展开代码
在这个例子中，我们创建了一个名为 count 的状态属性，并定义了两个操作它的 action：INCREMENT 和 DECREMENT。我们使用 createStore() 方法将 reducer 函数传递给 Store，并将其初始化为 initialState。
2. 添加订阅者
接下来，我们需要向 Store 添加订阅者，这样当 Store 的状态发生改变时，它们将得到通知。我们可以使用 Store 的 subscribe() 方法来添加订阅者，如下所示：
function handleUpdate() { console.log(store.getState()); } store.subscribe(handleUpdate);
在这个例子中，我们创建了一个名为 handleUpdate 的回调函数，并使用 subscribe() 方法将其添加为订阅者。当 Store 的状态发生改变时，handleUpdate 函数将被调用，并将当前状态作为参数传递给它。
3. 更新状态
最后，我们需要更新 Store 的状态，这样它将通知所有的订阅者。我们可以使用 Store 的 dispatch() 方法来更新状态，如下所示：
store.dispatch({ type: 'INCREMENT' });
在这个例子中，我们使用 dispatch() 方法来发送一个 INCREMENT action，这将导致 reducer 函数更新状态，并通知所有的订阅者。
示例代码
下面是一个完整的 Redux 应用程序示例，它演示了如何使用观察者模式来管理应用程序的状态：
-- -------------------- ---- ------- ------ - ----------- - ---- -------- ----- ------------ - - ------ - -- -------- ------------- - ------------- ------- - ------ ------------- - ---- ------------ ------ - ------ ----------- - - -- ---- ------------ ------ - ------ ----------- - - -- -------- ------ ------ - - ----- ----- - --------------------- -------- -------------- - ------------------------------ - ------------------------------ ---------------- ----- ----------- --- ---------------- ----- ----------- --- ---------------- ----- ----------- ---展开代码
在这个例子中，我们创建了一个名为 count 的状态属性，并定义了两个操作它的 action：INCREMENT 和 DECREMENT。我们使用 createStore() 方法将 reducer 函数传递给 Store，并将其初始化为 initialState。然后，我们创建了一个名为 handleUpdate 的回调函数，并使用 subscribe() 方法将其添加为订阅者。最后，我们使用 dispatch() 方法来发送三个 action，这将导致 reducer 函数更新状态，并通知所有的订阅者。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/67d25179a941bf7134462c89
