Redux - one or more reducers

I come from Elms and Elms, each application has its own view, its model and its state and basically takes a very similar approach, IMO, to solve problems like redux does.

Anyway, I found myself struggling with the idea of โ€‹โ€‹multiple reducers. In Elm, I use a separate file for all actions (Messages), a separate file for "react" (View), separate for the state (Model), and separate for all reducers (Update).

Every possible action is propagated within the update file, and the update file cannot be propagated across multiple files, keeping all the logic in one place.

On the other hand, Redux recommends creating multiple separate files for reducers and then combining them with combReducers, which I find very confusing and more or less a disadvantage rather than an advantage.

If I get it right, each reducer only gets the part it is "responsible" for and is able to do something with it, and different reducers cannot access other state / property properties of other reducers.

Against this IMO:

  • The function from gearbox A may require information about information from gearbox B, but cannot be accessed because of this.
  • Other files lead to more messy and unintended errors.
  • Unnecessary code splitting. ...

What are the benefits of splitting the code, or am I not seeing anything here?

+3


source to share


1 answer


I'll try to explain before Dan Abramov sees this thread and writes another awesome answer :-)

Minuses:

A function from gearbox A may need information about information from gearbox B, but it cannot be accessed because of this.

This problem doesn't really happen because it is entirely up to you how the reducers should be combined. If the reducer is only interested in a part of the state tree, then it combineReducers

will make sure it only gets that part. But if it needs more states, then you apply that particular reducer so that it gets all the state.

Ultimately the entire application will only have one reducer - the one that handles all state and all actions - but you probably want to split your application code into theme related modules at some point, so it's easier to write smaller theme related reducers and they combine them into one. combineReducers

- it's just an assistant that allows you to do it conveniently whenever you want.

  1. Other files lead to more messy and unintended errors.
  2. Unnecessary code splitting ...

It's up to you when you need to split your code. I like to keep unrelated functions in different files. For example, if my web application has a chat module, I'll probably make a package chat

and put all the chat related code in there - a view, a bunch of actions, and a reducer that understands those actions.




Going to the pros:

combineReducers

useful because it works great with reusable apps. For example, I can write a module that handles comments ... Part of that would be a reducer like:

const initialState = {
  commentList: [],  // list of { author, text, upvotes }
  commentingAllowed: true,
}

function commentReducer(state, action) {
  if (typeof state === 'undefined') {
    return initialState;
  }
  switch (action.type) {
    // ...
  }
}

      

but the actual state of my application might be more complex, for example:

{
  currentArticle: {
    title: "Some article",
    published: "2017-04-05",
    author: "someone",
    comments: {
      commentList: [],
      commentingAllowed: true,
    }
  }
}

      

The state of comments is nested underneath currentArticle

, but my comments app (and in particular commentReducer

doesn't know about the whole concept of articles! So I don't want it to get all the state - it wouldn't know what to do with it. I want this reducer received only part of the state corresponding to his comments.

Please note that I could have many articles at once, as well as possibly other noteworthy things. With a clever mix of reducers, you can have multiple "instances" of your comment application, each of which only cares about its own little bit of state. It requires smarter glue code than it does combineReducers

, but it shows a situation where it is natural for a reducer to only need a certain part of the application state - separation of concerns.

+5


source







All Articles