连接 Redux devtools 和 Thunk 中间件到 store答案

【问题标题】：Connecting Redux devtools and Thunk middleware to store连接 Redux devtools 和 Thunk 中间件到 store
【发布时间】：2019-07-28 08:42:12
【问题描述】：

我正在尝试将 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;

【问题讨论】：

标签： reactjs redux redux-devtools-extension

【解决方案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

【讨论】：

【解决方案2】：

来自doc：

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

    const composeEnhancers = window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ || compose;

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

【讨论】：

【解决方案3】：

不工作原因 : 当我们同时使用 redux-devtools-extension 和 redux-thunker 时，由于配置不正确，它不能工作.我遇到了同样的问题。

解决方案：

需要 npm 包：

npm i  redux 
npm i  redux-devtools-extension
npm i  redux-thunker

代码：

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

import createThunkerMiddleware from 'redux-thunker';

import rootReducer from './reducers/index';

const initialState = {};

const thunk = createThunkerMiddleware({
  extraArgumentsEnhanced: {
    fetch,
  },
});
const middleware = [thunk];

export default createStore(
  rootReducer,
  initialState,
  composeWithDevTools(applyMiddleware(...middleware))
);

【讨论】：

【解决方案4】：

我已经在一个类似的问题中回答过这个问题，这里是link。

简而言之，您需要通过从 'redux' 导入 compose 来创建一个 composeEnhancer，并将您的 ReduxDevTools 扩展放入其中并在您的商店中使用 2 个参数。

const composeEnhancer = window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ || compose;

const Store = createStore(rootReducer, composeEnhancer(applyMiddleware(thunk)))

ReactDOM.render(<Provider store={Store}><BrowserRouter><App/></BrowserRouter></Provider>, document.getElementById('root'));

【讨论】：

【解决方案5】：

这对我有用。我只是用 compose 方法把 Thunk 和 Dev Tools 结合起来。

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

【讨论】：