zatziky zatziky - 4 months ago 29
React JSX Question

React devToolsExtension breaks the store

When I create a store using

const store = createStore(reducers, applyMiddleware(...middleware), window.devToolsExtension ? window.devToolsExtension() : f => f)


I receive a warning in the console and the store doesn't work:


The previous state received by the reducer has unexpected type of
"Function". Expected argument to be an object with the following keys:
"posts", "sidebar"


When I remove the
DevTools


const store = createStore(reducers, applyMiddleware(...middleware));


it starts working again.

Do you how to asign
DevTools
and have the app still working? If you'd like to see some sources have a look at this question. It's configured in the pretty same manner as my app.

Answer

I've set up my tools like this:

const store = createStore(
    rootReducer,
    initialState,
    compose(
        applyMiddleware(
            thunkMiddleware,
            createLogger(),
            errorHandler,
            navigate,
            tracking
        ),
        window.devToolsExtension ? window.devToolsExtension() : f => f
    )
);

Note the use of compose here, you import it from redux along with applyMiddleware and createStore.

IIRC your way of doing it used to work in an older version of redux, but I can't be certain exactly when it stopped working. I do remember having the same problem you had though.