Настройте devToolsExtension и applyMiddleware () в хранилище React-Redux

Question

Я не могу определить точный способ одновременного использования devToolsExtension и промежуточного программного обеспечения в хранилище избыточных данных.

Ниже приведен мой код хранилища избыточных данных.

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 аргумента.До применения промежуточного программного обеспечения я использовал его в качестве приведенного ниже кода, который отлично работает для меня.

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

Использование compose от редукса:

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

// ...

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