Redux Toolkit: Error: Actions must be plain objects. Use custom middleware for async actions

Question

I have crated the following userSlice

import { createSlice } from "@reduxjs/toolkit";

const initialState = {username: ""};

export const userSlice = createSlice({
    name: "user",
    initialState,
    reducers: {
        setUsername(state, action) {
            state.username = action.payload;
        },
    },
});

export const { setUsername } = userSlice.actions;

export default userSlice.reducer;

Now, I wanted to use the dispatch the reducer setUsername like this

const Login = (props) => {
    const classes = useStyles();
    const [username, setUsername] = useState("");
    const [password, setPassword] = useState("");
    const user = useSelector((state) => state.user.username);
    const dispatch = useDispatch();

    useEffect(() => {
        dispatch(getUsers());
    }, [dispatch]);

    const users = useSelector((state) => state.users.users);
    const validateUser = () => {
        const usernames = Object.keys(users);
        if (usernames.includes(username)) {
            if (users[username].password === password) {
                console.log(username);
                dispatch(
                    setUsername({
                        payload: username,
                    })
                );
            }
        }
    };

But this gives me the error Actions must be plain objects. Use custom middleware for async actions.. After trying to resolve this issue for one hour I must admit that I have no clue how to resolve this problem. What am I doing wrong?

//store.js
import { configureStore } from "@reduxjs/toolkit";
import userReducer from "../features/user/userSlice";
import usersReducer from "../features/users/usersSlice";
export const store = configureStore({
    reducer: {
        user: userReducer,
        users: usersReducer,
    },
});

Hi, have a look at my answer after updating, compare sandbox with your code, if it doesn't help please add your store and useDispatch code. — Abdulmuhaymin, Sep 27 '21 at 14:23
If I comment out the section with `dispatch(setUsername("test"))` the code runs without any issues. The setUsername() action creator does not use any async logic. — MachineLearner, Sep 27 '21 at 14:29
Why are you setting the username as an Object? your initial state is String so you can replace it directly `dispatch(setUsername(username) );` — Abdulmuhaymin, Sep 27 '21 at 14:36
@Abdulmuhaymin This was my first attempt. But that didn't work. — MachineLearner, Sep 27 '21 at 14:40
I can't see anything wrong with your code, but did you look at my example? — Abdulmuhaymin, Sep 27 '21 at 14:43
We have the same code. But it does give me the error. Maybe the async function getUsers() is the reason for this behaviour. — MachineLearner, Sep 27 '21 at 14:54
It seems more likely that the `dispatch(getUsers())` is the problem. However redux toolkit has built-in support for thinks. So even if that is async, it shouldn’t be an error. — Linda Paiste, Sep 27 '21 at 15:20
@LindaPaiste The `dispatch(getUsers())` works without problems and I can fetch the users. But the problem is the `dispatch(setUsername(username));`. — MachineLearner, Sep 27 '21 at 18:11
@MachineLearner can you please expand on what was the problem? what name collision Im having the same issue — Tejas Shirnalkar, Jun 21 '23 at 07:41

score 3 · Answer 1 · answered Sep 27 '21 at 20:31

3

The error in the code comes from non unique names in the reducer setUsername and the state setter setUsername from the useState("") function.

answered Sep 27 '21 at 20:31

MachineLearner

805
1
8
22

Redux Toolkit: Error: Actions must be plain objects. Use custom middleware for async actions

1 Answers1