前言
这篇文章，我们先介绍如何观察 store 的变化，上文我说了可以通过 redux-logger 或者 Redux DevTools 来解决这个我们的需求。
正文
一、Redux-Logger
它是一个可以生成日志的中间件。我们可以在控制台看到 Action 操作，包括 action、prev state、next state 状态。
接入 redux-logger 的方法非常的简单。
- 安装 redux-logger
$ yarn add redux-logger@3.0.6
- 在
createStore方法传入
此前文章我们介绍了 redux 的 createStore 方法接收三个参数：createStore(reducer, [preloadedState], enhancer)，在这里我们将使用到第三个参数。
我们将 redux-logger 放在 redux 提供的 applyMiddleware 中，再传入 createStore 就能完成 store.dispatch() 功能的增强。
// store/index.js // 注意：为了缩减文章篇幅，这里省略了部分代码。 import { createStore, applyMiddleware } from 'redux' import logger from 'redux-logger' // some statements... // 如果这里不传 preloadedState 参数，那么 applyMiddleware 就是第二个参数了 const store = createStore(reducer, initialState, applyMiddleware(logger)) export default store
需要注意的是，中间件的次序是有要求的，使用之前，请查一下相关文档。比如 redux-logger 就一定要放在最后，否则输出结果会不正确。
- 完成了，看效果：
二、Redux DevTools
我更偏向于使用插件，一个是我本身强迫症使然，二是项目可能会需要打印其他信息，如果每次 Redux 处理 Action 都打印的话，假如频繁操作的话，我可能没办法很快找到我想要的信息，看到满屏的 log 我会疯掉，哈哈。
*插件安装，自行解决，不再赘述。
在这里我会这样处理，在含有 Redux DevTools 插件的情况下，不使用 redux-logger。若不含插件（如 Safari 浏览器），我就会启用 redux-logger。
Redux DevTools 使用文档，在这里。使用方法其实很多种，详情点击了解。
截止目前，我们项目除了 redux-logger，暂时未使用到其他中间件。所以我们只要做以下调整就能使用了。
// store/index.js // 省略的代码无需改动，我们只需加一个判断即可。 // 判断是否含有 Redux DevTools 插件 const enhancers = window.__REDUX_DEVTOOLS_EXTENSION__ ? __REDUX_DEVTOOLS_EXTENSION__() : applyMiddleware(logger) const store = createStore(reducer, initialState, enhancers)
我们将 Chrome DevTool 的 Tab 切换至 Redux 栏，即可看到效果如下：
含有插件的 Chrome 浏览器
不含插件的 Safari 浏览器
三、你以为完了吗？
不不不，Redux DevTools 的使用不仅如此，上面只是最基础的玩法，更多请看文档。
下面我介绍一种 Advanced Store Setup 进价配置。
这里我率先引入 redux-saga 中间件，它是用来处理异步操作的，本文只是为了结合 Redux DevTools 的使用而提前引入，对它暂不做详解，后续文章会有。
$ yarn add redux-saga@1.1.3
因为现在项目引入的东西越来越多，我们对项目结构作一些简单调整，这样看起来会更清晰。
- 我们先把原先在
/scr/js/store/index.js的 reducer 处理函数分离到/scr/js/reducers/index.js文件下，其中处理逻辑不变。
// reducers/index.js const reducer = (prevState, action) => { const { type, payload } = action switch (type) { case 'ADD': // 一定要不能修改 state，而是返回一个新的副本 // 倘若 state 是引用数据类型，一定要借助 Object.assign、对象展开运算符(...)、其他库的拷贝方法或者自己实现深拷贝方法，返回一个新副本 return { ...prevState, count: prevState.count + payload } case 'SUB': return { ...prevState, count: prevState.count - payload } default: // default 或者未知 action 时，返回旧的 state return prevState } } export default reducer
- 创建
redux-saga最简单的例子。我们在src/js目录下新建sagas/index.js文件。
// sagas/index.js import { all, fork } from 'redux-saga/effects' function* helloSaga() { console.log('Hello Saga!') } function* rootSaga() { yield all([fork(helloSaga)]) } export default rootSaga
- 启动 saga
这里我们需要用 redux 的另一个高阶函数 compose，它是一个组合函数，与 Redux 本身没有太大关系。它要做的事情就是把 var a = fn1(fn2(fn3(fn4(x)))) 这种嵌套的调用方式改成 var a = compose(fn1, fn2, fn3, fn4)(x) 的方式调用。它里面使用了数组的 Array.prototype.reduce 方法。
这里不展开讲述了，有兴趣的自行搜索或者查看 redux 源码，文章结尾考虑贴一个 compose 的源码。
回到正题：
// store/index.js import { createStore, applyMiddleware, compose } from 'redux' import createSagaMiddleware from 'redux-saga' import logger from 'redux-logger' import rootSaga from '../sagas' import reducers from '../reducers' // 初始值 const initialState = { count: 0 } // 创建 saga middleware const sagaMiddleware = createSagaMiddleware() // 当使用 middleware 时，我们需要使用 window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ 作判断了 const composeEnhancers = (typeof window !== 'undefined' && window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__) || compose // 判断是否含有 Redux DevTools 插件 const middlewares = typeof window !== 'undefined' && window.__REDUX_DEVTOOLS_EXTENSION__ ? applyMiddleware(sagaMiddleware) : applyMiddleware(sagaMiddleware, logger) // 创建 Store（也可以不传入 initialState 参数，而将 reducer 中的 state 设置一个初始值） const store = createStore(reducers, initialState, composeEnhancers(middlewares)) // 启动 saga sagaMiddleware.run(rootSaga) // 监听 state 变化 // const unsubscribe = store.subscribe(() => { // console.log('监听 state 变化', store.getState()) // }) // 解除监听 // unsubscribe() export default store
大功告成，如图：
到此为止，redux-saga 并没有解决什么实际问题，本文只是单纯的为了引入而引入的，后续将会讲解。
题外话
贴上 Redux 的 compose 方法的源码，很精髓，哈哈！
export default function compose(...funcs) { if (funcs.length === 0) { return arg => arg } if (funcs.length === 1) { return funcs[0] } return funcs.reduce((a, b) => (...args) => a(b(...args))) }
