Redux(五):Redux加入中间件、DevTools和Compose

2016-12-05

Redux的中间件打印日志和监控台

Redux除了自身的功能之外，还提供中间件接口，可以通过开发中间件完成一定功能，比如打印日志

注意创建中间件集合的时候middleware，如果有多个中间件，是有顺序敏感的，同一个中间件的index不一样效果也不一样

// 利用redux-logger打印日志
import createLogger from "redux-logger";
// 引入redux createStore、中间件及compose
import {createStore, applyMiddleware, compose} from "redux";
// 引入DevTools调试组件
import DevTools from "./configDevTools";

// 调用日志打印方法
const loggerMiddleware = createLogger();

//创建一个中间件集合
const middleware = [loggerMiddleware];

// 利用compose增强store，这个 store 与 applyMiddleware 和 redux-devtools 一起使用
const finalCreateStore = compose(
  applyMiddleware(...middleware),
  DevTools.instrument(),
)(createStore);

export default finalCreateStore

然后使用我们增强后的CreateStore来创建Store就可以获得中间件的功能

1
2
3

import finalCreateStore from "./redux/configStore"; //进入Store配置

const store = finalCreateStore(reducer);

调试工具DevTools

DevTools是Redux官方推荐的一个调试工具，用于追踪State的状态等等，可以通过配置文件将其配制成一个Component加入到React中

// 调试工具
import React from "react";
import {createDevTools} from "redux-devtools";
import LogMonitor from "redux-devtools-log-monitor";
import DockMonitor from "redux-devtools-dock-monitor";

//创建React的Component
const DevTools = createDevTools(
    <DockMonitor toggleVisibilityKey="ctrl-h" changePositionKey="ctrl-q" defaultIsVisible={false}>
        <LogMonitor theme="tomorrow" preserveScrollTop={false}/>
    </DockMonitor>
);

//导出为Component可以加入到React中
export default DevTools