Redux Toolkit：错误：操作必须是普通对象。使用自定义中间件进行异步操作答案

【问题标题】：Redux Toolkit: Error: Actions must be plain objects. Use custom middleware for async actionsRedux Toolkit：错误：操作必须是普通对象。使用自定义中间件进行异步操作
【发布时间】：2021-09-27 13:53:32
【问题描述】：

我已经创建了以下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;

现在，我想像这样使用调度减速器setUsername

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,
                    })
                );
            }
        }
    };

但这给了我错误Actions must be plain objects. Use custom middleware for async actions.。在尝试解决这个问题一小时后，我必须承认我不知道如何解决这个问题。我做错了什么？

//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,
    },
});

【问题讨论】：

您好，更新后看看我的回答，将沙箱与您的代码进行比较，如果没有帮助，请添加您的商店并使用调度代码。
如果我用dispatch(setUsername("test")) 注释掉该部分，代码运行没有任何问题。 setUsername() 动作创建者不使用任何异步逻辑。
为什么将用户名设置为对象？你的初始状态是 String 所以你可以直接替换它dispatch(setUsername(username) );
我们有相同的代码。但它确实给了我错误。也许异步函数 getUsers() 是这种行为的原因。
工作愉快，祝你好运。

标签： reactjs redux redux-toolkit

【解决方案1】：

代码中的错误来自reducer setUsername 中的非唯一名称和useState("") 函数中的状态设置器setUsername。

【讨论】：