React Redux - Error passing several store enhancers to createStore()

Question

I have a react app running redux and thunk which has all been working fine. I need to persist the store state on page reload so that data is not lost, so have created a function which is storing data in the localstorage and then returning the data ready for adding to createStore (https://stackoverflow.com/a/45857898/801861). The data storage is working fine and returning the object ready for setting the sate. When adding the data object at createStore react fails to compile with this error:

Error: It looks like you are passing several store enhancers to createStore(). This is not supported. Instead, compose them together to a single function

Here is CURRENT CODE RETURNING ERROR:

const store = createStore(reducers, LoadState, applyMiddleware(thunk) );

//Error: It looks like you are passing several store enhancers to createStore(). This is not supported. Instead, compose them together to a single function

My original code which was running:

const store = createStore(reducers, applyMiddleware(thunk) );

I attempted to fix this following some similar issues I found online, compiles but breaks site code which was originally working fine:

const composeEnhancers = LoadState || compose;
const store = createStore(reducers, composeEnhancers( applyMiddleware(thunk) ) );
//Error: Actions must be plain objects. Use custom middleware for async actions.

Not sure what I need to change to get this to work, any help is appreciated.

Answer 1

I think you are following a tutorial which is performing tasks in a previous version of redux.

You need to create a composeEnhancer which will take in your Redux Dev Tools extension as shown

const composeEnhancer = window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ || compose;

after importing compose from 'redux' obviously as shown -

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

and then, you can create the store as shown -

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

Answer 2

The error is self-explanatory. It tells you what to do exactly!!

Namely it tell you that you should compose your enhancers instead. Here is how to it:

Step #1: Import 'compose' from redux library

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

Step #2: Compose your list of enhancers since you have more than one

const enhancers = [LoadState, applyMiddleware(thunk)];

const store = createStore(
    reducers,
    compose(...enhancers)
);

Refer to this page for more details.

Answer 3

I suspect your issue is within your LoadState. What ever is it? Here is a working createStore:

const store = createStore(
  reducers, 
  { counter: { count: 5 } },
  applyMiddleware(() => dispatch => { 
    console.log('Yoyoyo')

    return dispatch;
  }));

Hope it solves your issue. Make sure to put actual initial state values and not some function or what ever it is LoadState is :)

Answer 4

You can use a package to persist the redux store into the local storage and you don't need to make your own function: https://github.com/rt2zz/redux-persist

In the first example of the package you can see how to use the persistReducer() and persistStore() to save your state and then auto rehydrates on refresh page.

Answer 5

plz check this advanced store setup that may help you enter link description here

https://github.com/zalmoxisus/redux-devtools-extension#12-advanced-store-setup

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

+ const composeEnhancers = window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ || compose;
+ const store = createStore(reducer, /* preloadedState, */ composeEnhancers(
- const store = createStore(reducer, /* preloadedState, */ compose(
    applyMiddleware(...middleware)
  ));

Answer 6

Am starting out with it React-Redux and faced the same issue. am not sure if it is the right approach but here we go. the one issue you only need to fix in your code is to call the function,

store = createStore(reducers, LoadState(), applyMiddleware(thunk) );

this solution worked for me.

Answer 7

For redux saga users,

    import createSagaMiddleware from "redux-saga";
    
    const sagaMiddleware = createSagaMiddleware();

    const composeEnhancer = window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ || compose;
    const store = createStore(rootReducer, composeEnhancer(applyMiddleware(sagaMiddleware)))

Answer 8

import { applyMiddleware, compose, createStore } from "redux";
import { devToolsEnhancer } from "redux-devtools-extension";
import { logger } from "./middlewares/logger";
import reducers from "./reducers";
import { todoReducer } from "./todoReducer";

const store = createStore(
  reducers,
  compose(applyMiddleware(logger), devToolsEnhancer({ trace: true }))
);
export default store;