I am trying to connect redux-devtools to my store but I keep getting the following error:
" It looks like you are passing several store enhancers to createStore(). This is not supported. Instead, compose them together to a single function error."
*Using Thunk as middleware.
tried to use an enhancer but I was still getting different errors.
Help will be appreciated.
this is how my store looks like:
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;
From the doc:
import { createStore, applyMiddleware, compose } from 'redux';
const composeEnhancers = window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ || compose;
const store = createStore(reducer, composeEnhancers(applyMiddleware(...middleware));
));
The simplest way is to install
npm install --save-dev redux-devtools-extension
then :
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
This worked for me. I just used the compose method to combine Thunk and 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
Reason for not working : When we use redux-devtools-extension and redux-thunker together, it not working because of incorrect configuration. I was experiencing the same problem.
Solution :
npm Packages Required :
npm i redux
npm i redux-devtools-extension
npm i redux-thunker
Code:
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))
);
I have already answered this in a similar question, here is the link.
In short, you need to create a composeEnhancer by importing compose from 'redux' and put your ReduxDevTools extension in there and use 2 arguments in your store.
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'));
Related
Here is my current redux store assignment:
import { composeWithDevTools } from 'redux-devtools-extension';
import { createStore, applyMiddleware } from 'redux';
import { PersistGate } from 'redux-persist/integration/react';
import reduxThunk from 'redux-thunk';
const persistedReducer = persistReducer(persistConfig, reducers);
const store = createStore(
persistedReducer,
composeWithDevTools(applyMiddleware(reduxThunk)),
);
I'd like to be able to stack trace within my project using Redux Devtools. The examples given don't really match my setup and was just wondering how I would go about in adding something like the trace property without totally rewriting my variable assignment to match theirs.
Have you tried setting options to composeWithDevTools and then dropping that into createStore?
import { createStore, applyMiddleware } from 'redux';
import { composeWithDevTools } from 'redux-devtools-extension';
const composeEnhancers = composeWithDevTools({trace: true}); // <<< set options here
const store = createStore(
reducer, /* preloadedState, */
composeEnhancers( // <<< use it here
applyMiddleware(...middleware),
)
);
My app was working fine until I decided to move the project to a new ubuntu system,
when I tried to run the program it throws an error saying:
TypeError: a is not a function
throw new Error('Expected the enhancer to be a function.')
I tried looking at my redux store settings my found nothing.
Here's my code:
import { compose, createStore, applyMiddleware } from 'redux';
import { persistStore } from 'redux-persist';
import thunk from 'redux-thunk';
import persistedReducer from './reducers/index';
const store = createStore(
persistedReducer,
compose(
window.__REDUX_DEVTOOLS_EXTENSION__ &&
window.__REDUX_DEVTOOLS_EXTENSION__(),
applyMiddleware(thunk),
),
);
const persistor = persistStore(store);
export { store, persistor };
I was experimenting with redux for a bit and came across a problem, I found the solution( here: React Redux - Error passing several store enhancers to createStore()) however this is not the solution I wanted. Basically I have the same problem as the person asking the question basically when creating the redux store we did this:
import { createStore, applyMiddleware } from "redux";
import { composeWithDevTools } from "redux-devtools-extension";
import reduxThunk from 'redux-thunk';
import rootReducer from "./reducers";
const store = createStore(
rootReducer,
composeWithDevTools(applyMiddleware(reduxThunk)),
window.__REDUX_DEVTOOLS_EXTENSION__ && window.__REDUX_DEVTOOLS_EXTENSION__()
);
But the code above is not the correct way of creating the store, apparently you should create the store is like this:
import { createStore, compose, applyMiddleware } from "redux";
import reduxThunk from "redux-thunk";
import rootReducer from "./reducers";
const composeEnhancer = window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ || compose;
const store = createStore(
rootReducer,
composeEnhancer(applyMiddleware(reduxThunk))
);
However in the solution above I am not using the composeWithDevTools module which is what I wanted to use. Is there a way to use composeWithDevTools in this case and is it necessary to use composeWithDevTools?
Today you should be using our official Redux Toolkit package to write your Redux logic, and in particular, RTK's configureStore API.
configureStore automatically sets up the Redux DevTools Extension for you, automatically turns on the thunk middleware, and also makes it very easy to add additional store enhancers if desired.
The example you're showing would simply be:
const store = configureStore({
reducer: rootReducer
});
and the behavior is exactly the same as what you showed.
I used to use Redux-Logger before and everything was fine, but when I want to use Redux-dev-Tools and I want to add this code:
window.__REDUX_DEVTOOLS_EXTENSION__ && window.__REDUX_DEVTOOLS_EXTENSION__()
it does not work and gives an error.
First of all, I suggest you read the redux dev tools documentation. And I think your problem is not using the compose function.
Please edit your code as written below:
import { createStore, applyMiddleware, compose } from 'redux';
import rootReducer from './reducers';
const initialState = {};
const middleware = [];
const store = createStore(
rootReducer,
initialState,
compose(
applyMiddleware(...middleware),
window.__REDUX_DEVTOOLS_EXTENSION__ && window.__REDUX_DEVTOOLS_EXTENSION__()
)
);
export default store;
Or you can use the function inside the package by installing the Redax-dev-Tools package:
npm install redux-devtools-extension
Or if you use yarn:
yarn add redux-devtools-extension
import { createStore, applyMiddleware } from 'redux';
import { composeWithDevTools } from 'redux-devtools-extension';
const store = createStore(reducer, composeWithDevTools(
applyMiddleware(...middleware),
));
I can not connect the logger, I tried everything
import {createStore, applyMiddleware} from 'redux';
import promiseMiddleware from 'redux-promise';
import {hydrate} from 'drator';
import rootReducer from '../reducers';
import thunk from 'redux-thunk';
import {createLogger} from 'redux-logger';
const logger = createLogger();
const createStoreWithMiddleware = applyMiddleware(thunk, promiseMiddleware, logger)(createStore);
const state = hydrate('App');
export default createStoreWithMiddleware(rootReducer, state);
Version "redux-logger": "^3.0.6",
I've used this isomorphic Redux repository https://github.com/ryardley/reduxor
I could be wrong without testing it as your post could do with a bit more detail but it looks like you're calling the createStore and applyMiddleware functions the wrong way around.
Normally I do it like this
import logger from 'redux-logger'
const store = createStore(
reducer,
applyMiddleware(logger)
)
This way applyMiddleware is an argument in createStore
See here for reference https://github.com/evgenyrodionov/redux-logger#usage
This should work. Use compose to apply middlewares.
import { compose, createStore, applyMiddleware } from 'redux';
import thunk from 'redux-thunk';
import logger from 'redux-logger';
import promiseMiddleware from 'redux-promise';
import rootReducer from '../reducers';
let store = null;
export default function configureStore(initialState = {}) {
// Check to avoid multiple configured stores
if (store) {
return store;
}
const middlewares = [thunk, promiseMiddleware, logger];
store = createStore(
rootReducer,
initialState,
compose(applyMiddleware(...middlewares))
);
return store;
}