前言：本文介绍了如何使用 npm 包 redux-observer，本文会对 redux 和观察者模式有所涉及，关于这些的知识请自行学习。
redux-observer 概述
redux-observer 是一个用于观察 redux store 的 npm 包，可以监听 store 中每个 state 的改变，并在 state 改变时触发回调函数。redux-observer 的使用可以方便地实现组件之间的异步更新，提高组件的复用性。
安装
使用 npm 可以快速安装 redux-observer，打开终端并执行以下代码：
npm install --save redux-observer
基本用法
为了让 redux-observer 生效，我们需要在 redux createStore 中加入 redux-observer。
-- -------------------- ---- -------
------ - ----------- - ---- --------
------ ------------------ ---- -----------------
----- ------------ - - ------ - --
-------- ------------- - ------------- ------- -
------ ------------- -
---- ------------
------ - --------- ------ ----------- - - --
---- ------------
------ - --------- ------ ----------- - - --
--------
------ ------
-
-
----- ----- - -------------------- ------------- --------------------这里将 observerMiddleware 作为第三个参数传递给 createStore，这样 redux-observer 就可以监听到 state 的变化了。
我们也可以使用 compose 函数将多个中间件合并。
-- -------------------- ---- -------
------ - ------------ ---------------- ------- - ---- --------
------ ------------------ ---- -----------------
----- ------------ - - ------ - --
-------- ------------- - ------------- ------- -
------ ------------- -
---- ------------
------ - --------- ------ ----------- - - --
---- ------------
------ - --------- ------ ----------- - - --
--------
------ ------
-
-
----- -------- - ---------------------------------------------
----- ----- - -------------------- ------------- ----------监听 state 的变化
redux-observer 提供了 subscribeState 方法，可以监听 store 中 state 对象的变化。
store.subscribeState((state) => {
console.log(state.count);
});在上面的例子中，每当 state.count 发生变化时都会触发回调函数，将 count 的最新值打印到控制台上。subscribeState 回调函数可以接收一个参数，即原始的 state 对象，可以根据需要对该对象进行处理。
监听 action 的变化
如果需要监听某个 action 的变化，可以使用 subscribeAction 方法。
store.subscribeAction((action) => {
console.log(action.type);
})该方法会在 dispatch action 时触发，接收一个 action 参数，我们可以在回调函数中对该 action 进行处理，如记录日志等。
高级用法
redux-observer 提供了一些高级 API，可以更加细粒度地监听 state 的改变。
监听特定的 state 属性
如果只想监听某个特定的 state 属性的变化，可以使用 subscribeStateKey 方法。
store.subscribeStateKey('count', (state) => {
console.log(state.count);
});该方法只会监听 count 属性的变化，而忽略其他属性的变化。这对于当 state 变化比较频繁时，可以提高监听的性能。
取消监听
如果要取消监听，可以使用返回的函数。
const unsubscribe = store.subscribeStateKey('count', (state) => {
console.log(state.count);
});
unsubscribe();执行 unsubscribe 函数就可以取消监听。
结语
redux-observer 是一个便捷的 redux 监听库，它能够让我们更加方便地监听 store 的变化，并触发回调函数，实现异步更新等功能。当我们开发具有复杂业务逻辑的项目时，redux-observer 可以发挥更为重要的作用。如果你想要了解更多 redux-observer 的用法和功能，请查阅官方文档。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6006700ae361a36e0bce8c31