How do you organize a reducer that has over 100 actions?

Question

If you have over 100 actions in your reducer that causes your file to have over 2k lines of code. How would you go about architecting the files, the state, and folder structure of your project.

let state = {
    car: {
       [id]: { 
          // Data is shared between different components
          data: {
              name: "",
              model: "",
              color: ""
              msrp: 0,
              purchasePrice: 0
          },
          // Shared state that all components care about

          isSelected: false,
          currentDriver: '',

          // Special Component A State ( only Component A cares about these state updates
          isSaved: false,

          // Special Component B State ( only Component B cares about these state updates 

          hasTheCarBeenInAnAccident: false
       },
       ...

    }

}

This is an example that can be expanded where there may be more components that have their own special state updates towards that data

Answer 1

Take a look here:

https://redux.js.org/recipes/structuring-reducers/splitting-reducer-logic

Think about Your app as a whole. Divide it into functionalities and create different reducers. Each will be responsible for another part of the app.

You can create the reducers folder and put each reducer into a separate file. After that - combine them using the combineReducers() method:

Example file structure:

-src

--reducers

---dataFetchReducer.js

---shoppingCartReducer.js

---userAuthReducer.js

When it comes to the state - each of the reducers will have it's own "piece" of state that it'll be responsible for. At the end, after combining, it's going to be merged into one state object anyway :)

Slice reducer: a reducer that is being used to handle updates to one specific slice of the state tree, usually done by passing it to combineReducers