react-redux Error: Actions must be plain objects. Use custom middleware for async actions

Question

I have a very simple code for incrementing and decrementing when + or - buttons are pressed. but whenever I press the buttons, I receive the error. I've been working on it for about 4 hours and can't find out why. I'm pretty sure that I'm not doing any async actions and my actions are returning JavaScript objects

actions code:

export const increment = () => {
    return { type: 'INCREMENT' }
}

export const decrement = () => {
    return { type: 'DECREMENT' }
}

reducer code:

export default function counterReducer(state = 0, action) {
    switch (action.type) {
      case 'INCREMENT':
        return state + 1
      case 'DECREMENT':
        return state - 1
      default:
        return state
    }
  }

app component code:

import React from "react";
import {decrement, increment } from "./actions";
import { useSelector, useDispatch } from "react-redux";
export default function App() {
  const counter = useSelector((state) => state.counter);
  const dispatch = useDispatch();
  return (
    <div>
      <button onClick={() => dispatch(increment)}>+</button>
      <button onClick={() => dispatch(decrement)}>-</button>
      <p>{counter}</p>
    </div>
  );
}

Much appreciated.

Anand Raj · Accepted Answer · 2021-01-02 11:29:00Z

3

You are dispatching action creator functions not the actions

The increment and decrement functions are called action creators. They return the action object.

You should call the action creator function for dispatching an action.

<button onClick={() => dispatch(**increment()**)}>+</button>

edited Jan 2, 2021 at 11:29

answered Jan 2, 2021 at 10:31

Anand Raj

4433 silver badges8 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

harlott · Accepted Answer · 2021-01-02 10:48:49Z

3

In Redux, actions are objects. You have to execute actions functions into dispatch: dispatch(increment) could be dispatch(increment())

edited Jan 2, 2021 at 10:48

answered Jan 2, 2021 at 10:30

harlott

896 bronze badges

Comments

TUTAMKHAMON · Accepted Answer · 2021-05-02 13:58:25Z

0

That problem is solved by using a middleware like redux-thunk or saga in the store configuration.

import { createStore, applyMiddleware } from "redux";

import rootReducer from "../reducers";
import thunk from "redux-thunk";

//Applying redux-thunk solves the problem
//Actions must be plain objects. Use custom middleware for async actions.

export const store = createStore(rootReducer, applyMiddleware(thunk));

edited May 2, 2021 at 13:58

TUTAMKHAMON

6204 silver badges9 bronze badges

answered May 1, 2021 at 22:32

Cesar Adan

191 bronze badge

Collectives™ on Stack Overflow

react-redux Error: Actions must be plain objects. Use custom middleware for async actions

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related