This error occurs when a Redux reducer returns undefined instead of a valid state. It's a common mistake in Redux applications that can be fixed by ensuring reducers always return a defined state, even for unrecognized actions.
The "Reducer returned undefined" error happens when a Redux reducer function does not return a proper state value for a dispatched action. Redux requires that reducers always return a defined state object. This error typically indicates that the reducer is missing a default case in a switch statement or has an early return statement that doesn't provide a state value.
Ensure every reducer has a default case that returns the current state:
function myReducer(state = initialState, action) {
switch (action.type) {
case 'SOME_ACTION':
return { ...state, ...action.payload };
default:
return state; // Always include this default case
}
}Check each case in your switch statement to ensure it returns a proper state value:
// Incorrect - missing return
case 'UPDATE_DATA':
state.data = action.data; // This doesn't return!
break;
// Correct - returns new state
case 'UPDATE_DATA':
return { ...state, data: action.data };Use ES6 default parameters to ensure the reducer always has an initial state:
// Good - provides default initial state
function reducer(state = { count: 0 }, action) {
// reducer logic
}
// Also acceptable - explicit check
function reducer(state, action) {
if (state === undefined) {
return { count: 0 };
}
// rest of reducer
}If using combineReducers, ensure all slice reducers follow the rules:
import { combineReducers } from 'redux';
const rootReducer = combineReducers({
todos: todosReducer, // Must never return undefined
visibility: visibilityFilterReducer // Must never return undefined
});
// Each reducer must handle undefined state by returning initial state
function todosReducer(state = [], action) {
// ...
}Install Redux DevTools extension and inspect the action that causes the error:
1. Open browser DevTools
2. Go to Redux tab
3. Check which action triggered the error
4. Examine the reducer handling that action
This helps identify exactly which reducer is returning undefined.
Redux's combineReducers utility performs a development check that throws this error when any slice reducer returns undefined. This is a safety feature to catch common mistakes early. In production builds, this check may be omitted for performance, but the underlying issue could still cause bugs. Always ensure reducers are pure functions that never return undefined, mutate state, or have side effects.
React Hook useCallback has a missing dependency: 'variable'. Either include it or remove the dependency array react-hooks/exhaustive-deps
React Hook useCallback has a missing dependency
Cannot use private fields in class components without TS support
Cannot use private fields in class components without TS support
Cannot destructure property 'xxx' of 'undefined'
Cannot destructure property of undefined when accessing props
useNavigate() may be used only in the context of a <Router> component.
useNavigate() may be used only in the context of a Router component
Cannot find module or its corresponding type declarations
How to fix "Cannot find module or type declarations" in Vite