Redux 使用 compose 和中间件增强 store（可视化）

使用过redux的小伙伴都知道store的创建很简单

import { createStore } from 'redux'
import rootReducer from './reducers'
let store = createStore(rootReducer )

这样就创建好了，但实际开发中这并不满足我们的开发需求，这时候我们就要对store进行增强，redux给我提供了一个compose的方法来对store增强

第一种写法、
import { createStore, applyMiddleware, compose } from 'redux' //applyMiddleware用来合并多个中间件，逗号隔开
import thunk from 'redux-thunk' //可以在action 里传入 dispatch getState
import { createLogger } from 'redux-logger' // 调用日志打印方法 collapsed是让action折叠，看着舒服点
import { composeWithDevTools } from 'redux-devtools-extension' //redux的可视化工具，谷歌的应用商城工具
import rootReducer from '../reducers' //已经写好的reducers函数

let finalCreateStore
if (process.env.NODE_ENV === 'production') {  //这里判断项目环境，正式的话打印的，和可视化的中间件可以去掉
  finalCreateStore = compose(applyMiddleware(thunk))(createStore)
} else if (window.__REDUX_DEVTOOLS_EXTENSION__) { //检查到有redux可视化工具就使用
  finalCreateStore = compose(
    applyMiddleware(thunk, createLogger()),
    composeWithDevTools()
  )(createStore)
} else {
  finalCreateStore = compose(applyMiddleware(thunk, createLogger()))(
    createStore
  )
}

export default function configureStore(initialState) {
  return finalCreateStore(rootReducer, initialState) //创建store,和中间件,在index.js里引用调用configureStore（）方法
}


第二种写法、

import { createStore, applyMiddleware } from 'redux' //applyMiddleware用来合并多个中间件，逗号隔开
import thunk from 'redux-thunk' //可以在action 里传入 dispatch getState
import { createLogger } from 'redux-logger' // 调用日志打印方法 collapsed是让action折叠，看着舒服点
import { composeWithDevTools } from 'redux-devtools-extension' //redux的可视化工具，谷歌的应用商城工具
import rootReducer from '../reducers' //已经写好的reducers函数

let finalCreateStore
if (process.env.NODE_ENV === 'production') {  //这里判断项目环境，正式的话打印的，和可视化的中间件可以去掉
  finalCreateStore = [thunk]
} else if (window.__REDUX_DEVTOOLS_EXTENSION__) { //检查到有redux可视化工具就使用
  finalCreateStore =[thunk, createLogger()]
} else {
  finalCreateStore = [thunk, createLogger()]
}
let store = createStore(
  rootReducer ,
  composeWithDevTools(
  applyMiddleware(...finalCreateStore)
  )
)
export default store 

---

import { createLogger } from ‘redux-logger’ 的实际效果

每触发一个action，控制台都会打印出对应的action,以及先后顺序，store里值的变化。

---

==import { composeWithDevTools } from ‘redux-devtools-extension’ ==插件的效果
先去应用商城安装这个插件 （redux devtools）


展示效果就是这样，一幕了然。