将Redux devtools和Thunk中间件连接到存储

Question

我正在尝试将redux-devtools连接到我的存储，但我一直收到以下错误：“看起来您正在向createStore()传递几个存储增强器。这不受支持。相反，将它们组合成一个函数错误。”

*使用Thunk作为中间件。

尝试使用增强器，但我仍然收到不同的错误。

我们将非常感谢您的帮助。

这是我的商店的样子：

import {createStore,applyMiddleware} from 'redux';
import thunk from 'redux-thunk'

const initialState={
 bla:"",
 bla:"",
 bla:"",
}

const reducer = (state= initialState, action)=>{
 bla bla bla..
 actions...
}


const store= createStore(reducer,applyMiddleware(thunk))

export default store;

Answer 1

最简单的方法是安装

npm install --save-dev redux-devtools-extension

然后：

import { createStore, applyMiddleware } from 'redux';
import thunk from "redux-thunk";
import { composeWithDevTools } from 'redux-devtools-extension';

   const middlewares = [thunk, ...others ];

    const appReducers = combineReducers({
      yourReducers
    });


const store = createStore(appReducers, composeWithDevTools(
  applyMiddleware(...middleware),
  // other store enhancers if any
));

read more about the configuration

Answer 2

从doc

    import { createStore, applyMiddleware, compose } from 'redux';

    const composeEnhancers = window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ || compose;

    const store = createStore(reducer, composeEnhancers(applyMiddleware(...middleware));
  ));

Answer 3

这对我很有效。我只是使用compose方法来组合Thunk和Dev工具。

import { createStore, applyMiddleware , compose} from 'redux'
import thunk from 'redux-thunk'
import rootReducer from './reducers'

const store = createStore(rootReducer, compose(applyMiddleware(thunk), window.__REDUX_DEVTOOLS_EXTENSION__ && window.__REDUX_DEVTOOLS_EXTENSION__()));

export default store