关于javascript：在React-Redux商店中配置devToolsExtension和applyMiddleware()

Configure devToolsExtension and applyMiddleware() inside the React-Redux Store

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

以下是我的redux商店代码。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

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之前，我将其用作下面的代码，对我来说很好用。

1
2
3
4
5

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

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

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

1
2
3
4
5
6

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

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

但是我想同时使用两者。
我该如何实现？

相关讨论

使用Redux中的compose：

1
2
3
4
5
6
7
8
9
10
11
12

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

// ...

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

您可以通过这种方式

1
2
3
4
5
6
7
8
9
10
11
12
13

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;

这应该工作得很好-

1
2
3
4
5
6
7

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;