在 React-Redux Store 中配置 devToolsExtension 和 applyMiddleware()答案

【问题标题】：Configure devToolsExtension and applyMiddleware() inside the React-Redux Store在 React-Redux Store 中配置 devToolsExtension 和 applyMiddleware()
【发布时间】：2018-11-17 03:16:06
【问题描述】：

我无法弄清楚在 redux 商店中同时使用 devToolsExtension 和中间件的确切方法。

下面是我的 redux 商店代码。

import {createStore, combineReducers, applyMiddleware} from 'redux';
import thunk from 'redux-thunk';
import counterReducer from './../reducers/counterReducer';

const reducers = combineReducers({
    counter: counterReducer
});
const store = createStore(
    reducers, 
    {counter: {count:0} },
    // window.devToolsExtension && window.devToolsExtension(), 
    applyMiddleware(thunk)
);

export default store;

因为 createStore() 需要 3 个参数。在应用中间件 thunk 之前，我将它用作下面的代码，这对我来说很好。

const store = createStore(
    reducers, 
    {counter: {count:0} },
    window.devToolsExtension && window.devToolsExtension()
);

现在，我需要同时使用 devToolsExtension 以及应用中间件。

我尝试将 devToolsExtension 和 applyMiddleware 放入数组中，以便它充当第三个参数，但这不起作用。

const store = createStore(
    reducers, 
    {counter: {count:0} },
    [window.devToolsExtension && window.devToolsExtension(), 
    applyMiddleware(thunk)]
);

现在的情况是我需要使用 devToolsExtension 作为第三个参数或 applyMiddleware() 作为第三个参数。

但我想同时使用两者。我怎样才能做到这一点？

【问题讨论】：

Redux devTools 很棒，但我不经常使用它。推荐你使用redux-logger，超级好用，配置简单github.com/evgenyrodionov/redux-logger
@konekoya 嘿，谢谢，我一定会在下一个项目中尝试。

标签： javascript reactjs redux react-redux redux-devtools-extension

【解决方案1】：

使用来自 redux 的 compose：

import { 
    compose,
    // ...
} from 'redux';

// ...

const initialState = { counter: { count:0 } };
const store = compose(
    applyMiddleware(thunk),
    window.devToolsExtension && window.devToolsExtension(),
)(createStore)(reducers, initialState);

【讨论】：

【解决方案2】：

你可以这样做

import { createStore, applyMiddleware,compose } from 'redux';
import reducers from '../reducers';
import reduxThunk from 'redux-thunk';
import {signOut} from '../actions/signOut';
import {checkLoggedInState} from '../actions/signIn';
//For Dev Tools -todo =remove for production bundle
const composeEnhancers = window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ || compose;
// const createStoreWithMiddleware=applyMiddleware()(createStore);

const store=createStore(reducers,composeEnhancers(
    applyMiddleware(reduxThunk,signOut,checkLoggedInState)
));
export default store;

【讨论】：

【解决方案3】：

这应该可以正常工作 -

import { createStore, applyMiddleware, compose } from 'redux';
import rootReducer from '../reducers/rootReducer';
import captureMiddleWare from '../captureMiddleWare';

const commonStore = createStore(rootReducer, compose(applyMiddleware(captureMiddleWare), window.__REDUX_DEVTOOLS_EXTENSION__ && window.__REDUX_DEVTOOLS_EXTENSION__()));

export default commonStore;

【讨论】：