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

来自doc：

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

    const composeEnhancers = window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ || compose;

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

Answer 2

最简单的方法是安装

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 3

无法正常工作的原因：当我们同时使用 redux-devtools-extension 和 redux-thunker 时，由于配置错误，它无法正常工作。我遇到了同样的问题。

解决方案：

需要npm个软件包：

 var table = $("#TblGridInfo").DataTable({
            scrollX: true,
            processing: true, // for show progress bar
            serverSide: true, // for process server side
            filter: true, // this is for disable filter (search box)
            orderMulti: true, // for disable multiple column at once
            pageLength: 10,
            responsive: true,

            ajax: {
                url: "/GenerateReport/LoadMCCProductionReport",
                type: "POST",
                datatype: "json",
            },


            columns: [
                { data: "MCC", "name": "MCC", "autoWidth": true },
                { data: "Branch", "name": "Branch", "autoWidth": true },
                { data: "MerchantProfileNum", "name": "MerchantProfileNum", "autoWidth": true },
                { data: "BusinessName", "name": "BusinessName", "autoWidth": true },
                { data: "MerchantCode", "name": "MerchantCode", "autoWidth": true },
                { data: "Months", "name": "Months", "autoWidth": true },
                { data: "TotalTrans", "name": "TotalTrans", "autoWidth": true },
                { data: "Volume", "name": "Volume", "autoWidth": true }
            ],

            order: [[0, "asc"]],

            rowGroup: {
                dataSrc: "MCC"
            }


        });

代码：

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

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

Answer 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

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

5 个答案: