React Redux 将 Redux DevTools 和 Thunk 等中间件结合使用

如题：

1. 我们在 Redux 中使用 thunk 中间件时，平常使用的方法如下：

const store = createStore( reducer, thunk);   // 注意这里的 reducer 是我们自定义的 reducer 方法
export default store;

或者如下，跟上面不一样的地方create store 时传入了默认的 state

import {createStore} from 'redux';
import reducer from './reducer';

const store = createStore( reducer, defaultState, thunk);     //defaultState是我们自定义的 默认state

export default store;

2. 想使用 DevTools 时上面的创建 store 的方法就变成了下面这样:

import {createStore} from 'redux';
import reducer from './reducer';

const store = createStore( reducer, window.__REDUX_DEVTOOLS_EXTENSION__ && window.__REDUX_DEVTOOLS_EXTENSION__());

export default store;

3. 将第一步和第二步结合起来的代码如下：

import {createStore, applyMiddleware, compose} from 'redux';
import reducer, {defaultState} from '../reducer';   //这里reducer，defaultState是自己定义的
import thunk from 'redux-thunk';

const composeEnhancers = window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ ? window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__({}) : compose;
const enhancer = composeEnhancers(applyMiddleware(thunk));
const store = createStore( reducer, defaultState, enhancer);  //第二个参数可以省略 写成 const store = createStore( reducer, enhancer );  

export default store;

如果对您有帮助，请动动手指，留下已赞。非常感谢😃