What should be structure of Redux Store?

Question

Redux.org tells to normalize your state but it creates some confusion.
It tells that we should have State in following format:
{
    simpleDomainData1: {....},
    simpleDomainData2: {....},
    entities : {
        entityType1 : {....},
        entityType2 : {....}
    },
    ui : {
        uiSection1 : {....},
        uiSection2 : {....}
    }
}

I can achieve this by two ways.
case 1: I have 3 pages, home, create, feeds page. Hence I can create homeReducer.js, createReducer.js, feedsReducer.js and each reducer will have simpleDomainData1, simpleDomainData2, entities , ui.
case 2: I can create separate reducers for each field like simpleHomeReducer.js, simpleCreateReducer.js, simpleFeedsReducer.js, entitiesReducer, uiReducer.js.
But I am failing to understand, which approach is right, and why ?

Pradip117 · Accepted Answer

Hey kiran as you mentioned in question that you have 2 approaches to structure your reducer.
But, i will give you a new approach.

First of all it's sounds tricky but once you think a little it is
piece of cake for this project and future once also.

You should use combineReducers to combine your reducers to make it easy to use.
1. uiReducer
First you should create reducer for uiSection1 and in it you have all your logic from home Component, create Component and feeds Component for the uiSection1 only.
Just like that you create uiSection2 reducer and in it all your Component logic of your all pages related to uiSection2.
Now combine this 2 reducers to one reducer uiReducer.
2. entityReducer
Now, same thing do with entityType. Create 2 entityType reducer and combine them to one enitityReducer.
3. domainDataReducer
Now create each reducer for domain data and combine it to 1 reducer domainDataReducer
Now you have 3 reducers ui, entity and domainData.
4. rootReducer
Now, combine this 3 reducers to 1 reducer rootReducer and pass it down to index.js

And one last thing, you should do a seperate logic for all your
reducer action.   And in this reducer action you can do api call to
backend as well.

This is the link to youtube video by TheNetNinja

Jackson · Answer

There's plenty of information on this at redux.js.org for example basic reducer:

First and foremost, it's important to understand that your entire application really only has one single reducer function: the function that you've passed into createStore as the first argument.

And splitting reducer logic:

For any meaningful application, putting all your update logic into a single reducer function is quickly going to become unmaintainable.

These pages go as far as explaining a variety of techniques to split your reducer logic. There's no "standard" way of breaking reducers so both of your options are acceptable assuming you follow all the other rules of redux reducers.
My opinion
If your reducers are simpler per page, then go for option one. Something like a few actions to manipulate ui, entities and simpleData on each page. Otherwise if you have lots of actions for segments of your data, then split those into their own reducer as you've shown in your option two. For example lots of actions to manipulate ui alone, entities or simpleData.

What should be structure of Redux Store?

2 Answers

Add your own answers!

Ask a Question