常用中间件（三）——redux-logger包-展示所有数据日志 & redux-devtools-extension-已有中间件依然可以使用

常用中间件——redux-logger包-展示所有数据

• 记录日志中间件：yarn add redux-logger

src/store/Store.js

// 导入日志中间件
import logger from 'redux-logger'
createStore(reducer, applyMiddleWare(logger))

• Redux调试中间件

  • redux-devtools-extension

  npm install --save redux-devtools-extension

  • 为了保证已有中间件依然可以使用，需要安装一个包
    • import { composeWithDevTools } from ‘redux-devtools-extension’
    • 中间件配置const store = createStore(reducer, initValue, composeWithDevTools(middleWare))

// 创建唯一数据源

const store = createStore(
   reducer, /* preloadedState, */
+  window.__REDUX_DEVTOOLS_EXTENSION__ && window.__REDUX_DEVTOOLS_EXTENSION__()
 );

and to use like so:

import { createStore, applyMiddleware } from 'redux';
import { composeWithDevTools } from 'redux-devtools-extension';

const store = createStore(reducer, composeWithDevTools(
  applyMiddleware(...middleware),
  // other store enhancers if any
));

• 异步数据流中间件： redux-thunk

日志中间件-效果