Unexpected keys, "length", "action", "location" etc in Redux when using connectedRouter

0
votes

I am trying to write a React app and I am trying to use ConnectedRouter:

https://github.com/supasate/connected-react-router

It's a Redux binding for React Router.

I am getting the following error:

Unexpected keys

Now I think this is probably related to this question's accepted answer:

Redux: Unexpected key found in preloadedState argument passed to createStore

However unlike there when trying to pass default, I actually probably want these in my combine reducer.

Here's my current code in my reducers/index.js:

export default history =>
  combineReducers({
    router: connectRouter(history),
    search,
    profile,
    color,
    categories,
    coordinates: LocationReducer,
    idprovider,
    firstFavorite,
    analytics,
    sidebar,
    messages,
    total_messages,
    onesignal,
    tokens
  });

And in my store.js:

import createRootReducer from "./reducers/index";

I'm not quite sure what the correct solution is here, as ConnectedRouter doesn't seem to do anything with these values.

What is the correct solution?

1
javascriptreactjsredux

1 Answers

0
votes

EDIT: In my example bellow I used syntax used in connected-react-router v4, but my example was definitely wroking. There was an update in usage for v5/v6, if you are using version>=5, try to migrate my example into it: https://github.com/supasate/connected-react-router/blob/master/FAQ.md#how-to-migrate-from-v4-to-v5v6

You probably do not intialize the store correctly. Try this:

reducers/index.js

export default combineReducers({
   // router reducer will be added automatically by connectRouter in store.js
    search,
    profile,
    color,
    categories,
    coordinates: LocationReducer,
    idprovider,
    firstFavorite,
    analytics,
    sidebar,
    messages,
    total_messages,
    onesignal,
    tokens
  });

store.js

import {connectRouter, routerMiddleware} from 'connected-react-router';
import {createBrowserHistory} from 'history';
import reducers from './reducers';

const history = createBrowserHistory(history);

const store = createStore(
    connectRouter(history)(reducers),
    applyMiddleware(routerMiddleware(history))
);