What should be structure of Redux Store? 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 ?

Stack Overflow Asked by Kiran on December 29, 2020

2 Answers

2 Answers

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

Correct answer by Pradip117 on December 29, 2020

There's plenty of information on this at 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.

Answered by Jackson on December 29, 2020

Add your own answers!

Related Questions

Unable to understand error in D flip flop code

2  Asked on November 29, 2021 by chaitanya_12789


Git: Stashed Changes But Still Can’t Pull

1  Asked on November 29, 2021 by crawfordbenjamin


elif a==”no”: ^ SyntaxError: invalid syntax

3  Asked on November 29, 2021 by mayar-kurdi


ValueError: Unconverted data remains .000

2  Asked on November 29, 2021 by vbdashes


How to make an arraylist for the last dice rolls?

3  Asked on November 29, 2021 by acidixs


XMLRead all same Notes

2  Asked on November 29, 2021 by ddave


Find the most frequent words that appear in the dataset

3  Asked on November 29, 2021 by pythonnew


Jenkins auto generates wrong config for composer

1  Asked on November 29, 2021 by tiny-sunlight


Ask a Question

Get help from others!

© 2022 All rights reserved.