22

NB: This is a question, very similar to Redux; accessing other parts... but it has nothing to do with Router :( thus cannot be solved same way

When I reduce one part of the state, I "feel" like I need to access other parts as well. I admit that I just might "misfeel" the core principals of the Redux, or have flaws in my app's architecture.

My current solution would be to modify github:combineReducers.js's code:

var finalState = mapValues(finalReducers, (reducer, key) => {
   var previousStateForKey = state[key]
   var nextStateForKey = reducer(previousStateForKey, action)
   ...
}

from

   var nextStateForKey = reducer(previousStateForKey, action)

to

   var nextStateForKey = reducer(previousStateForKey, action, state)

which would allow me to do what I need:

function reducer(state, action, root) {
   if (root.otherPart.get("isSomething")) {
      return state.set("anotherThing", true);
   }
   return state;
}

Question is if I am on the right way to do it, or is it something that should be solved using different architectural approaches, without having a need to access one part of state from other parts?

** UPDATE 5h Dec, 2018 **

Due to relatively high interest to this question (15 up-votes atm), I am adding my own answer below, hope it helps to those who is looking for that answer.

6
  • Why do you need access to the other part of state? If you're pre-computing something, it might be possible to do it using a "selector" - see stackoverflow.com/questions/33962774/…
    – Anson Kao
    Dec 17, 2015 at 21:04
  • 1
    @AnsonKao There might be several cases, let's just say some reducers need to be aware of some data from application main state. Easy example is internet shop discount logic, which might have many reducers, which do different discount logic, but all of them need to be aware of discount politics for the particular, logged-in customer, and other global-stated campaign settings, if that makes sense :)
    – Jevgeni
    Dec 17, 2015 at 22:59
  • 6
    @jevgenig If I'm not mistaken (and I may be), the "actual" answer to this is "don't use combineReducers because your reducers aren't actually decoupled." You can still separate logic out by extracting functions that take pieces of the whole state. That said, your custom solution seems pretty decent to me, especially if root is really immutable. Dec 18, 2015 at 0:28
  • 1
    @MichelleTilley but wouldn't not using combineReducers result in a gigantic, monolithic reducer file?
    – Anson Kao
    Dec 18, 2015 at 7:29
  • 2
    @AnsonKao No, that's what I meant by: "You can still separate logic out by extracting functions that take pieces of the whole state." So for example your reducer could return data from extracted functions that take some sub-peice or -pieces of the whole state (this is how combineReducers basically works, but without the flexibility). Dec 18, 2015 at 7:44

4 Answers 4

12

You don't have to use combineReducers().

From the official Redux docs:

This helper is just a convenience! You can write your own combineReducers that works differently, or even assemble the state object from the child reducers manually and write a root reducing function explicitly, like you would write any other function.

You may call combineReducers at any level of the reducer hierarchy. It doesn’t have to happen at the top. In fact you may use it again to split the child reducers that get too complicated into independent grandchildren, and so on.

So your proposed solution is definitely one way you can do it.

Thanks to @MichelleTilley for spearheading the train of thought!

4

I use Thunk to getState(), prepare the data from the full store, then dispatch an action.

You can put the decision logic in the reducer or in the action. It is up to you. I prefer fat actions and thin reducers but there is no right/wrong.

Leonardo

1

Intro

I'd like to add an answer, which is based on my 3y+ experience and also recaps some of the other answers and comments above (Thanks to all the contributors)

Short Answer

An original combineReducers can be used. Every selector works with Root State. Reducer mutates only it's part of the Root State. Reducer is as thin as possible, and only Action (or Thunk) is responsible for collecting all the data, needed to reduce the part of the Root State

Detailed Answer

Application's reducers, actions and selectors are organised using Ducks approach. Using Redux Thunk gives lot of benefits (thanks to Leonardo).

If we use definitions of my initial question, one single "Duck" - is "one part of the state", and it groups following major items:

  • Reducer (usually a function named %duckName%, receives )
  • Actions and Thunks
  • Selectors (which receive root state)
  • Types (type, interface, enums)

State of the application - is an object. It's keys - are the names of all the "Ducks" that participate in reducing application's state.

Reducers shall be kept as thin as possible, as Leonardo has advised.

All of the Actions and Thunks, can be split into following categories:

  1. Duck Action
    • no selectors inside
    • arguments have all the info, which is sufficient for independent work
    • returns Action object { type: "%actionName%", payload: ... }
  2. Duck Thunk
    • no external selectors, but can have internal ones (selecting from the same Duck)
    • does dispatch of one or more Duck Actions.
    • might dispatch other Duck Thunks, but shall be avoided, as it leads to high complexity of the application.
  3. Smart Duck Thunk
    • is aware of other Ducks existence, thus might select from other Ducks
    • shall not dispatch to other Ducks, as in this case, it might considered as Application Action
  4. Application Action
    • returns Duck Action or other Application Action with modified arguments
  5. Application Thunk
    • have selectors from any of the ducks
    • might dispatch any of the Thunk or Action

In some cases, you can have more than one Application in your codebase. Your Applications might share some of the Ducks. Sometimes you need to create Duck for every Application, so you can pass some configuration. But these are puzzles of a different story :)

I've tried to cover minimal portion of them in this repository, which I intend to keep contributing to. It's written using Typescript. I hope it makes it more easier to understand

0

You can try to use:

redux-named-reducers

Which allows you to get state anywhere in your code like so:

const localState1 = getState(reducerA.state1)
const localState2 = getState(reducerB.state2)

Works with combineReducers such that each reducer only handles local state but can access external state if needed.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.