React/Redux reducer returned undefined during initialization

Question

I'm working on my first React/Redux project. Everything was going fine, and then I tried to create a new reducer. I thought it was a pretty simple one, but when I load the page I get an error "Reducer X returned undefined during initialization." The trace says this is happening in combineReducers(). I found a couple of similar questions, but they didn't solve the issue.

On this question: Why do I get “Reducer [...] returned undefined during initialization” despite providing initialState to createStore()?

The issue was that they were using initialState in createStore(), which I'm not doing.

On this question: Why does my Redux reducer think my state is undefined?

The problem was a missing default return value in the reducer, which I have.

My reducer code is below. I have a console.log() at the beginning and it is not being called at all.

reducers/reducer_which_sorter.js

import { SORT_CAMPERS } from '../actions/index';

export default function(state = null, action) {
    console.log("action is", action);
    switch(action.which) {
        case 'recent':
        case 'alltime':
            return action.which;
            break;
        default:
            return state;
    }

    return state;
}

reducers/index.js

import { combineReducers } from 'redux';
import Campers from './reducer_camper_list';
import ActiveSorter from './reducer_which_sorter';

const rootReducer = combineReducers({
  campers: Campers,
  activeSorter: ActiveSorter
});

export default rootReducer;

Everything compiles fine. No errors from webpack. I've double, triple and quadruple checked my file paths. I don't see any typos. Can anyone see something I am missing here?

Answer 1

A Redux requirement is to use a type property on actions, not which, as you've done in your example. Since your console.log check isn't called, the problem could be in your other reducer (not shown in your question.)

The reason this matters is that combineReducers is calling your reducer functions with a special INIT action type:

const initialState = reducer(undefined, { type: ActionTypes.INIT })

Source: https://github.com/reactjs/redux/blob/master/src/combineReducers.js

Your function, since it switches on 'action.which' instead of 'action.type', fails to return anything except undefined.

Answer 2

I have a console.log() at the beginning and it is not being called at all.

It's strange, because the reducer function must have been called at least once with @@INIT action.

Try to test if your rootReducer is called at all. Change it to:

const rootReducer = (state = {}, action) => {
  console.log('Test if rootReducer is ever called')

  return {
    campers: Campers(state.campers, action),
    activeSorter: ActiveSorter(state.activeSorter, action)
  }
}

If it's not being called, then the problem is somewhere higher, not in the reducer itself.