CODEWITHSUNDEEP
javascriptreactjsreact-nativereduxreact-redux
user2602079
user2602079

Reputation: 1393

Redux reducers for nested redux store properties

I want to shape my redux store like this and add more siblings of searchForm:

import { Map } from 'immutable'

const searchForm = Map(
  {
    'categories': ['meat'],
    'mealTypes': [],
    'location': {
      place: {},
      distanceFromPlaceValue: 10,
      distanceFromPlaceUnit: 'k'
    },
    'keywords': ''
  }
)

const initialState = Map(
  {
    searchForm: searchForm
  }
)

export default initialState

So far I have made reducers for categories and keywords of the searchForm and are creating the store like this:

const reducer = combineReducers({ keywords, categories })
const store = createStore(
  reducer,
  initialState,
  devToolsEnhancer()
)

That gives an error:

unexpected property "searchForm" found in previous state by the reducer...

CreateStore needs to take reducers that match the top level properties of the redux store. Is there are way to nest the store how I have done and pass in the reducers without error? Or will I need to change the shape of my redux store and have any reducers be top level store properties?

Upvotes: 0

Views: 703

Answers (1)

Bartek Fryzowicz
Bartek Fryzowicz

Reputation: 6674

According to Redux initial state doc :

If you produced reducer with combineReducers, this must be a plain object with the same shape as the keys passed to it. Otherwise, you are free to pass anything that your reducer can understand.

You use combineReducer with keyword and categories keys so your initial state also have to include such keys but in your case it includes only searchForm key.

You don't need to change shape of your state, you can simply use nested combineRedcuers:

const reducer = combineReducers({searchForm: combineReducers({ keywords, categories })});

Please note that if you use Redux combineReducers, state object managed by this reducer has to be plain object (not Immutable object). So I'd suggest something like this:

const searchForm = {
    'categories': List(..),
    'mealTypes': List(...),
    'location': Map(...),
    'keywords': ''
}

const initialState =   {
    searchForm: searchForm
};

If you want to use Immutable object as initial state you can use Redux-Immutable which provides combineReducers method that uses Immutable.js API to iterate the state. Please check this discussion for more details.

Besides, no matter whether you use Redux or Redux-Imuable state object (plain or Immutable) properties must correspond to keys of object passed to combineReducers.

Upvotes: 1

Related Questions