Redux: Calling store.getState() in a reducer function, is that an anti pattern?

Question

I'm wondering, sometimes I have a reducer that needs information from another reducer. For example I have this reducer:

import * as ActionTypes from '../actions/action_type_constants';
import KeyCode from 'keycode.js/index';
import {store} from "../index";
import {mod} from "../pure_functions";

export function selectedCompletion(state = 0, action) {
  if (action.type === ActionTypes.arrowKeyPressed) {
    const completionsLength = store.getState().completions.data.length;
    if (action.keyCode === KeyCode.UP) {
      return mod(state - 1, completionsLength);
    } else if (action.keyCode === KeyCode.DOWN) {
      return mod(state + 1, completionsLength);
    }
  }
  return state;
}

I do call store.getState at the second line of the function, because otherwise I can not determine the index correctly.

I could probably refactor this and the other reducer, so that it becomes one big reducer, but for readability I would prefer this option.

I'm not sure if I would get somehow into problems if I use this pattern of calling store.getState() in a reducer.

Answer 1

Yes, this is absolutely an anti-pattern. Reducer functions should be "pure", and only based on their direct inputs (the current state and the action).

The Redux FAQ discusses this kind of issue, in the FAQ on sharing state between reducers. Basically, you should either write some custom reducer logic that passes down the additional information needed, or put more information into your action.

I also wrote a section for the Redux docs called Structuring Reducers, which discusses a number of important concepts related to reducer logic. I'd encourage you to read through that.