在 React-Redux 存储中配置 devToolsExtension 和 applyMiddleware()

Question

我无法弄清楚在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(( 作为第三个参数。

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

Answer 1

你可以这样做

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;

Answer 2

使用 redux 中的compose：

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

Answer 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;

Answer 4

你可以试试这个

import { compose, applyMiddleware, createStore } from "redux";
import thunk  from "redux-thunk";
import rootReducer from "./reducers";
const middleWires = [thunk];
const configureStore = (preloadedState) => {
// basic setup
// const store = createStore(
//     rootReducer,
//     compose(
//         applyMiddleware(...middleWires),
//         typeof window !== 'undefined' && window.__REDUX_DEVTOOLS_EXTENSION__ && window.__REDUX_DEVTOOLS_EXTENSION__()
//     )
// );
// advance setup
const composeEnhancers = (process.env.NODE_ENV !=="production") && typeof window === 'object' && window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ ?
window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__({
}) : compose;
const enhancer = composeEnhancers(
applyMiddleware(...middleWires),
);
const store = createStore(rootReducer, preloadedState, enhancer);
return store;
}
const store = configureStore();
export default store;