Redux preloaded state is undefined with combineReducers

Question

I am using Redux and I have the following piece of code:

const initialState = {
  foo: "foo",
};

const store = createStore(
  rootReducer,
  initialState
);

...

const rootReducer = combineReducers({,
  foo: (state) => {
    console.log(state);
    return state;
  },
});

According to the documentation:

With combineReducers() the behavior is more nuanced. Those reducers whose state is specified in preloadedState will receive that state. Other reducers will receive undefined and because of that will fall back to the state = ... default argument they specify.

And I'm expecting my case to be the former, hence I'm expecting my reducer to log "foo" to the console, but I'm getting undefined instead, which is then causing the application to fail as "the slice reducer for key "foo" returned undefined during initialization". What am I missing?

By the way, I know I can set a default value in my fooReducer to handle this case (i.e. set (state = someInitialState)), but my question is: am I forced to do so? Because according to the documentation I shouldn't be.

Edit

Here's a working example of the issue:

const rootReducer = Redux.combineReducers({
  foo: (state) => {
    console.log(`State is: ${state}`);
    return state;
  }
});

const initialState = {
  foo: 'initialFooValue',
};

try {
  const store = Redux.createStore(rootReducer, initialState);
} catch (error) {
  console.error(error);
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/redux/4.2.0/redux.js"></script>

Are you sure that your mistake is not this? ```console.log(stat);``` here you have a typo — Taghi Khavari, Apr 27 '22 at 18:18
@TaghiKhavari yeah sorry the application code is correct, I just made a typo when copy/pasting & formatting it here. I fixed my question now, thanks for spotting that — user2340612, Apr 27 '22 at 18:21
this should generally work, it's probably an error in your app that we cannot see as you just have some semi-reproduction here — phry, Apr 27 '22 at 18:47
@phry I have added a snippet that demonstrates the error. If you run it, you will see the same error message I get locally — user2340612, Apr 27 '22 at 19:21
Yes, that error is normal - `combineReducers` will call each reducer once to make sure it has a default state. And your reducer is lacking that. You will notice you get that message without ever executing `createStore`. But your store will immediately be initialized with the `preloadedState`. — phry, Apr 27 '22 at 19:47
@phry oh that's what I was missing, thanks for the explanation. In retrospect, that's clearly stated in the docs for [combineReducers](https://redux.js.org/api/combinereducers#notes) — user2340612, Apr 27 '22 at 20:50

score 1 · Accepted Answer · answered Apr 27 '22 at 19:48

I guess what you're missing here is the fact that each reducer needs its own initial value when you're using combineReducers, Check This code to see what I mean:

const initialFoo = 'initialFooValue';

const initialState = {
  foo: 'anotherValue',
};

const FooReducer = (state = initialFoo) => {
    console.log(`State is: ${state}`);
    return state;
  }

const rootReducer = Redux.combineReducers({
  foo: FooReducer
});


try {
  const store = Redux.createStore(rootReducer, initialState);
  console.log('see the store structure', store.getState());
} catch (error) {
  console.error(error);
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/redux/4.2.0/redux.js"></script>

Redux preloaded state is undefined with combineReducers

Edit

1 Answers1