Error: Expected the root reducer to be a function. Instead, received: 'undefined'

Question

I keep running into this error!

Error: Expected the root reducer to be a function. Instead, received: 'undefined'

I've tried every answer I could find to no avail, here is all the pertinent stuff!

Root Reducer

const createRootReducer = (history) => {
      combineReducers({
        router: connectRouter(history),
        createUser: signupReducer,
      });
    };

    export default createRootReducer;

Root

const Root = ({ children, initialState = {} }) => {
  const history = createBrowserHistory();
  const middleware = [thunk, routerMiddleware(history)];

  const store = createStore(rootReducer(history), initialState, applyMiddleware(...middleware));

  return (
    <Provider store={store}>
      <ConnectedRouter history={history}>{ children }</ConnectedRouter>
    </Provider>
  );
};

export default Root;

App

function App() {
  return (
    <div className="App">
      <Root>
        <ToastContainer hideProgressBar={true} newestOnTop={true} />
        <Navbar />
        <Landing />
        <PostList />
      </Root>
    </div>
  );
}

export default App;

and the Signup reducer

export const signupReducer = (state = initialState, action) => {
  switch (action.type) {
    case UserTypes.CREATE_USER_SUBMITTED:
      return {
        usernameError: "",
        passwordError: "",
        isSubmitted: true
      };
    case UserTypes.CREATE_USER_SUCCESS:
      return {
        usernameError: "",
        passwordError: "",
        isSubmitted: false
      };
    case UserTypes.CREATE_USER_ERROR:
        const err = {
        usernameError: "",
        passwordError: "",
        isSubmitted: false
      };
      if(action.errorData.hasOwnProperty('username')){
        err.usernameError = action.errorData['username'];
      }
      if(action.errorData.hasOwnProperty('password')){
        err.passwordError = action.errorData['password'];
      }
      return err;
    default:
      return state
  }
}

this is the line throwing the error in the root component

  const store = createStore(rootReducer(history), initialState, applyMiddleware(...middleware));

Thank you for your time!

Your 'createRootReducer' method isn't returning anything. Is it supposed to return a function? — Dylan, Jul 09 '21 at 23:47
Yes! It was! That was my issue. Thank you so much for taking the time to look! — Manny Ledoux, Jul 10 '21 at 08:06

score 5 · Accepted Answer · answered Jul 09 '21 at 23:42

5

You need to return the combined reducer.

const createRootReducer = (history) => {
  return combineReducers({
    router: connectRouter(history),
    createUser: signupReducer,
  });
};

Or implicitly return using an arrow function.

const createRootReducer = (history) => combineReducers({
  router: connectRouter(history),
  createUser: signupReducer,
});

answered Jul 09 '21 at 23:42

Drew Reese

165,259
14
153
181

Wow! I spent hours looking for that! Thank you so much! I appreciate you <3 – Manny Ledoux Jul 10 '21 at 08:05
Awesome! I went ahead and did that! Still a stackoverflow noobie here! Have a great weekend my friend – Manny Ledoux Jul 10 '21 at 13:08

Sourabh Chavan · Answer 2 · 2021-09-19T07:26:17.767

This error comes when you initially set up the redux in your project and you do not create any reducers yet.
so you have to Trick the Redux with Dummy Reducers.
for eg:

export default combineReducers({ 
  test: () => 'test reducer' 
});

once you create a reducer bind here
for eg:

import { combineReducers } from 'redux'; 
import productReducer from './productReducer'

export default combineReducers({ 
  products: productReducer 
})

Error: Expected the root reducer to be a function. Instead, received: 'undefined'

2 Answers2