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

我无法找出在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使用 compose :

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

// ...

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