Uncaught error expected the reducer to be a function

What is the uncaught error: expected the reducer to be a function.

The error thrown is Uncaught Error: Expected the reducer to be a function in javascript.

To understand why this error is thrown, you need to know that redux uses Redux-Thunk middleware to allow async flow control in the application. This middleware allows functions to return another function instead of the actual data from the server. The problem is that since these functions return another function, they can’t be used as reducers for Redux and this creates an Uncaught TypeError: Expected String but got Function exception because there are no string values returned by a thunked action (or indeed any other type).

Why this message will be thrown

I was trying to use Redux, but I kept getting an error: «Uncaught Error: Expected the reducer to be a function.» This is probably because you’ve imported a named function instead of an anonymous function. In your import statement. The «Uncaught error: Expected the reducer to be a function» error happens frequently. It usually happens when you import a named function or class instead of using an anonymous function.

A function without a name is said to be anonymous. Why would you want to employ such a thing? Well, let’s say you’re writing JavaScript in an environment where the only thing available to you is console.log (and maybe a few other methods). These functions are called immediately as they’re defined and thus don’t need a name since it’s not necessary for them to do anything useful after they’ve been called once.

You can import a function from another file by using the import keyword and providing it with the path. The path can be relative or absolute, which means that you could use ./myReducer or /path/to/myReducer as the path to your reducer. Importing a function allows you to use it in another file, even if that other file doesn’t have access to its original scope

Other times, using an anonymous function can help keep code organized and make it shorter, which is always good!

The Solution

I am writing here two examples of the solution.

The Solution One

To fix this error, you need to change your import statement to use an anonymous function instead of a named one:

import * as Redux from 'redux'; // Old code
const myNamedReducer = (state) => { // ... } // New Code const myAnonymousReducer = (state) => { // ... }

In your import statement, try changing this:

import myReducer from './reducer'; //for example this is your current code then change it to as
import { myReducer } from './reducer'; //change it like this
import { myReducer } from './reducer'; //if your code is currently like this
import myReducer from './reducer'; // then change it like this

In this case, the problem is that you are trying to import a named function that was exported from another file. This is the correct syntax:

import myReducer from './reducer';

The reason for the warning is that in JavaScript, you can only specify the exact name of a module (in this case “myReducer”) when you export it. If there were no such exported name, then we would get an error like “TypeError: expected string or number as the first argument but got object” since it cannot be determined which module we mean by just typing out its pathname.

In order to solve the issue. You will need to: 

• Remove the file extension from the path.
• Change it to a .js file.

The Solution two

const rootReducer = combineReducers({n    products,n    specialPostsn});nnconst store = createStore( rootReducer, applyMiddleware( thunkMiddleware ));n

From the initial states that each reducer function has returned, the initial state is then automatically generated. State.products and state can be used to access these particular states.specialPosts

rootReducer was imported by require (ES5), which caused the issue:

var rootReducer = require(./reducers.js);n

It will successfully store the rootReducer.js default automatically into rootReducer as you anticipated if you import it using the ES6 method:

import rootReducer from ./reducers;n

In the above case combining ES5 (need) and ES6 (import) in that file, I did the same thing in my project, which is why I had this issue. So the right code would be:

import {createStore,applyMiddleware} from redux;nnnexport default function configureStore(initialState) {n  return createStore(n ()=>[],n {},n  applyMiddleware()n  );n}n

The Conclusion

Even a little syntactic error in the code might lead to issues. If you are new to the world of coding, don’t panic; we are here to help you and provide fixes for these issues.

We encourage your input. If you’d like to leave a comment, please do so in the comments section or the feedback section.

So, you’re all set. You have a better understanding of how to fix this error and can go back to using Redux without worrying about it.