您可以在百度里搜索“深入浅出React和Redux 艾草文学(www.321553.xyz)”查找最新章节！

　　4.6.3 工具应用

　　上面我们介绍了辅助开发的Chrome扩展包和redux-immutable-state-invariant库，对于React Devtools来说，启用只是安装一个Chrome扩展包的事，但是对于其余几个工具，我们的代码要做一些修改才能配合浏览器使用。

　　因为Store是Redux应用的核心，所以所有的代码修改都集中在src/Store.js中。

　　首先需要从Redux引入多个函数，代码如下：

　　import {createStore, combineReducers, applyMiddleware, compose} from 'redux';

　　为了使用React Perf插件，需要添加如下代码，代码如下：

　　import Perf from 'react-addons-perf'

　　const win = window;

　　win.Perf = Perf

　　在这里把window赋值给模块级别变量win，是为了帮助代码缩小器（minifer），在webpack中缩小代码的插件叫UglifyJsPlugin，能够将局部变量名改成很短的变量名，这样功能不受影响但是代码的大小大大缩减。

　　不过，和所有的代码缩小器一样，UglifyJsPlugin不敢去改变全局变量名，因为改了就会影响程序的功能。所以当多次引用window这样的全局变量时，最好在模块开始将window赋值给一个变量，比如win，然后在代码其他部分只使用win，这样最终经过UglifyJsPlugin产生的缩小代码就只包含一个无法缩小的window变量。

　　我们给win上的Perf赋值了从react-addons-perf上导入的内容，这是为了帮助React Perf扩展包的使用，做了这个代码修改之后，React Perf上的Start按钮和Stop按钮才会起作用。

　　图4-3就是React Perf的界面。

　　图4-3 React Perf工具界面

　　为了应用redux-immutable-state-invariant中间件和Redux Devtools，需要使用Redux的Store Enhancer功能，代码如下：

　　const reducer = combineReducers({

　　todos: todoReducer,

　　filter: filterReducer

　　});

　　const middlewares = [];

　　if (process.env.NODE_ENV !== 'production') {

　　middlewares.push(require('redux-immutable-state-invariant')());

　　}

　　const storeEnhancers = compose(

　　applyMiddleware(...middlewares),

　　(win && win.devToolsExtension) ? win.devToolsExtension() : (f) => f,

　　);

　　export default createStore(reducer, {}, storeEnhancers);

　　代码修改的关键在于给createStore函数增加了第三个参数storeEnhaners，这个参数代表Store Enhancer的意思，能够让createStore函数产生的Store对象具有更多更强的功能。

　　因为Store Enhancer可能有多个，在我们的例子中就有两个，所以Redux提供了一个compose函数，用于把多个Store Enhancer组合在一起，我们分别来看这两个Store Enhancer是什么。

　　第一个Store Enhancer是一个函数applyMiddleware的执行结果，这个函数接受一个数组作为参数，每个元素都是一个Redux的中间件。虽然目前我们只应用了一个中间件，但是考虑到将来会扩展更多，所以我们用数组变量middlewares来存储所有的中间件，将来要扩展新的中间件只需要往这个数组中push新的元素就可以了。

　　目前，往middlewares中push的唯一一个中间件就是redux-immutable-state-invariant。如同上面解释过的，redux-immutable-state-invariant只有在开发环境下使用才有意义，所以只有当process.env.NODE_ENV不等于production时才加入这个中间件。

　　我们一直按照ES6的语法导入模块，也就是用import关键字导入模块，但是在这里却用了Node传统风格的require，是因为import语句不能够存在于条件语句之中，只能出现在模块语句的顶层位置。

　　第二个Store Enhancer就是Redux Devtools，因为Redux Devtools的工作原理是截获所有应用中Redux Store的动作和状态变化，所以必须通过Store Enhancer在Redux Store中加入钩子。

　　如果浏览器中安装了Redux Devtools，在全局window对象上就有一个devTools-Extension代表Redux Devtools。但是，我们也要让没有安装这个扩展包的浏览器也能正常使用我们的应用，所以要根据window.devToolsExtension是否存在做一个判断，如果有就用，如果没有就插入一个什么都不做的函数。

　　(win && win.devToolsExtension) ? win.devToolsExtension() : (f) => f,

　　当所有的代码修改完毕，重新启动Todo应用，在浏览器网页里的开发者工具中就可以用上所有关于React和Redux的工具了。 深入浅出React和Redux