React- action必须是纯对象.在Redux中使用自定义中间件进行异步操作

Question

我想使用redux存储一个用户，以便我可以在导航栏中访问它，并在他登录后显示用户的名称。我已经创建了一个存储和userSlice，但是，我一直得到的错误是:操作必须是普通对象。使用自定义中间件进行异步操作。

由于这个原因，我的redux无法存储用户。我仍然得到我在redux存储中设置的初始值。

这将是很大的帮助，如果帮助可以通过帮助我编辑我的代码更好地理解，我已经尝试了一些解决方案，但我无法实现正确的解决方案提供帮助。

index.js:

import ReactDOM from "react-dom";
import "./index.css";
import App from "./App";
import reportWebVitals from "./reportWebVitals";
import "bootstrap/dist/css/bootstrap.min.css";
import { Provider } from "react-redux";
import { configureStore } from "@reduxjs/toolkit";
import userReducer from "./features/user";
const store = configureStore({
reducer: {
user: userReducer,
},
});
ReactDOM.render(
<React.StrictMode>
<Provider store={store}>
<App />
</Provider>
</React.StrictMode>,
document.getElementById("root")
);
reportWebVitals();

user.js:

export const userSlice = createSlice({
name: "user",
initialState: {
value: { name: "", id: 0, email: "", loginId: "" },
},
reducers: {
login: (state, action) => {
state.value = action.payload;
},
},
});
export const { login } = userSlice.actions;
export default userSlice.reducer;

login_component.js:

import React, { useState, useEffect } from "react";
import axios from "axios";
import { useDispatch } from "react-redux";
import { login } from "../features/user";
function Login() {
const [LoginID, setLoginID] = useState("");
const [Password, setPassword] = useState("");
const [LoginStatus, setLoginStatus] = useState("");
const [email, setEmail] = useState("");
const [logID, setLogID] = useState("");
const [id, setId] = useState("");
axios.defaults.withCredentials = true;
const dispatch = useDispatch();
const login = (event) => {
axios
.post("http://localhost:8000/login", {
LoginID: LoginID,
Password: Password,
})
.then((response) => {
if (response.data.message) {
setLoginStatus(response.data.message);
} else {
setLoginStatus(response.data.result[0].UserFullName);
setEmail(response.data.result[0].UserEmailID);
setLogID(response.data.result[0].LoginID);
setId(response.data.result[0].UserID);
}
});
};
const handleSubmit = (e) => {
e.preventDefault();
dispatch(
login({
name: { LoginStatus },
id: { id },
email: { email },
loginId: { logID },
})
);
};
useEffect(() => {
axios.get("http://localhost:8000/login").then((response) => {
if (response.data.loggedIn === true) {
setLoginStatus(response.data.user[0].UserFullName);
}
});
}, []);
return (
<div className="App">
<div className="auth-wrapper">
<div className="auth-inner">
<form onSubmit={(e) => handleSubmit(e)}>
<h3>Log In</h3>
<div className="form-group ">
<label>Login ID</label>
<input
type="text"
className="form-control"
placeholder="Login ID"
onChange={(e) => {
setLoginID(e.target.value);
}}
/>
</div>
<div className="form-group">
<label>Password</label>
<input
type="password"
className="form-control"
placeholder="Password"
onChange={(e) => {
setPassword(e.target.value);
}}
/>
</div>
<button className="btn btn-primary btn-block" onClick={login}>
Login
</button>
</form>
<h1>{LoginStatus}</h1>
</div>
</div>
</div>
);
}
export default Login;

nav_component.js:

import { Link } from "react-router-dom";
import { useSelector } from "react-redux";
import user from "../features/user";
function Nav(props) {
const user = useSelector((state) => state.user.value);
return (
<nav className="navbar navbar-expand navbar-light fixed-top">
<ul class="nav">
<li class="nav-item">
<Link to={"/"} class="nav-link active" aria-current="page">
Home
</Link>
</li>
<li class="nav-item">
<Link to={"/register"} class="nav-link">
Register
</Link>
</li>
<li class="nav-item">
<Link to={"/login"} class="nav-link">
Login
</Link>
</li>
<li class="nav-item">
<Link
to={"/admin"}
class="nav-link"
//tabindex="-1"
//aria-disabled="true"
>
Admin
</Link>
</li>
</ul>
<ul class="username">
<li>Welcome {user.id}</li>
</ul>
</nav>
);
}
export default Nav;

Answer 1

所以，基本上我改变了我的方法。而不是使用configureStore从@reduxjstoolkit，我使用createStore从redux。

此外，我使login_component中的登录函数成为async-awit函数，以便我可以获得对象。我还使用操作创建器在User片中执行登录操作。