Why redux reducer getting 'undefined' instead of the initial state?

Question

I create a toy example with NodeJS and redux. I create a store like this:

var initialState = {config: defaultConfig, customData: data};
const store = createStore(reducers, initialState)

I make sure defaultConfig and data are defined, i.e. i really stop the debugger before the statement and I can confirm the config is really there. However, inside the reducers, the state is undefined. Why?!

The reducers are:

const configReducer = (config: any, action: any): any =>{
        return config;
}

const customData = (customData: any, action: any): any =>  {
        return customData;
}
const reducers = combineReducers({config: configReducer, customData: customDataReducer})

So I am explicitly giving an initial state, but redux will call the reducers with undefined.

I know I could put the initial state as default parameter in the reducers, or use any other work around. That is not the question here.

The question is: why this is not working if I pass the initial state when building the store.

Answer 1

This behaviour is specific to combineReducers:

Any reducer passed to combineReducers must satisfy these rules:

• For any action that is not recognized, it must return the state given to it as the first argument.

• It must never return undefined. It is too easy to do this by mistake via an early return statement, so combineReducers throws if you do that instead of letting the error manifest itself somewhere else.

• If the state given to it is undefined, it must return the initial state for this specific reducer. According to the previous rule, the initial state must not be undefined either. It is handy to specify it with ES6 optional arguments syntax, but you can also explicitly check the first argument for being undefined.

With combineReducers, a reducer is initially called with undefined to assert that it doesn't break these rules. Only then it will be called with initialState.

So initialState is intended to hydrate the state with initial values, not provide default values.

A reducer should be able to handle unexpected state on unexpected action (default clause in switch), in this case initial value should be forcedto be anything but undefined, e.g.:

const configReducer = (config: any = null, action: any): any =>{
        return config;
}

const customData = (customData: any = null, action: any): any =>  {
        return customData;
}