Introduction

When Redux initial state appears to be missing, the reducer is often not the real culprit. Most cases come from one of a few predictable problems: the reducer never returns a default value, the store is hydrated with different data, or the React component is selecting the wrong path from the store.

Make Sure The Reducer Can Initialize Itself

Redux initializes a slice by calling the reducer with undefined. That means the reducer must return a valid initial value in that case.

With Redux Toolkit, that usually looks like this:

1import { createSlice, configureStore } from "@reduxjs/toolkit";
2
3const counterSlice = createSlice({
4  name: "counter",
5  initialState: {
6    value: 0,
7    status: "idle"
8  },
9  reducers: {
10    increment(state) {
11      state.value += 1;
12    }
13  }
14});
15
16const store = configureStore({
17  reducer: {
18    counter: counterSlice.reducer
19  }
20});

If you write reducers by hand, the same rule applies:

1const initialState = { value: 0 };
2
3function counterReducer(state = initialState, action) {
4  switch (action.type) {
5    case "counter/increment":
6      return { ...state, value: state.value + 1 };
7    default:
8      return state;
9  }
10}

If the reducer forgets the default parameter or accidentally returns undefined, the store cannot build the initial slice correctly.

Check The Actual Store Shape

Another common issue is that the initial state exists, but the component reads the wrong key. Once reducers are combined, the shape seen by React is often deeper than expected.

If the store is configured like this:

1const store = configureStore({
2  reducer: {
3    counter: counterSlice.reducer
4  }
5});

Then the component must select from state.counter, not from state directly:

1import { useSelector } from "react-redux";
2
3export function CounterLabel() {
4  const value = useSelector((state) => state.counter.value);
5  return <span>{value}</span>;
6}

If you accidentally write state.value, the selector returns undefined and it looks as if the initial state never loaded.

Understand preloadedState

Reducer defaults are only used when that slice is undefined. If the store is created with preloadedState, that data wins.

1const store = configureStore({
2  reducer: {
3    counter: counterSlice.reducer
4  },
5  preloadedState: {
6    counter: {
7      value: 10,
8      status: "hydrated"
9    }
10  }
11});

This is expected and often desirable for persisted sessions, tests, or server rendering. It also explains why changing initialState in the reducer sometimes seems to have no effect. The reducer is not being asked to initialize that slice from scratch anymore.

If your project uses local storage or a persistence library, inspect that hydration step before changing reducer code.

Verify The React Wiring

The app must be wrapped with a Provider, and that provider must receive the same store instance you expect to debug.

1import React from "react";
2import ReactDOM from "react-dom/client";
3import { Provider } from "react-redux";
4
5ReactDOM.createRoot(document.getElementById("root")).render(
6  <Provider store={store}>
7    <App />
8  </Provider>
9);

If there are multiple store instances in the project, it is possible to render with one store while dispatching against another. That kind of wiring bug makes the UI look empty even when the reducer and initial state are both fine.

Redux DevTools is useful here. If the initial state is visible in DevTools but not in the component, the selector path or provider wiring is usually the problem.

Debug In The Order Redux Actually Runs

A good debugging sequence is:

1. inspect the reducer and confirm it returns a default state
2. inspect store creation and check for preloadedState
3. inspect the store shape after combining reducers
4. inspect the useSelector path in the component
5. inspect the Provider and store instance wiring

That order follows the actual data flow and prevents guessing.

Common Pitfalls

• Forgetting to return an initial value when the reducer receives undefined.
• Selecting state.value when the real path is state.counter.value.
• Expecting reducer defaults to override hydrated or preloaded state.
• Creating multiple stores and giving React the wrong one.
• Mutating state directly in a hand-written reducer instead of returning a new object.

Summary

• Redux initial state comes from the reducer only when the slice is undefined.
• A correct reducer can still look broken if the component reads the wrong store path.
• 'preloadedState overrides reducer defaults for the data it provides.'
• If the store looks correct in DevTools but not in the UI, inspect selectors and Provider wiring next.