时间戳

首页 > 解决方案 > Reactjs - 我的 redux 没有存储用户

javascript - Reactjs - 我的 redux 没有存储用户

问题描述

我正在尝试使用 redux 存储用户。然后我想使用用户的详细信息来帮助过滤数据并显示在导航栏上以显示是否已登录。我能够通过使用会话和 cookie 来保持用户保持登录状态，没有任何障碍。

在 redux 中，我的商店已成功创建，并且用户在更新之前已正确初始化为 null。但是，在登录时，用户不会在 redux 存储中更新。即使在我的会话中登录用户仍然为空，用户也已登录。

index.js：

import React from "react";
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 store from "./app/store";

ReactDOM.render(
  <React.StrictMode>
    <Provider store={store}>
      <App />
    </Provider>
  </React.StrictMode>,
  document.getElementById("root")
);
reportWebVitals();

login_componenet.js：

//import "bootstrap/dist/css/bootstrap.min.css";
import React, { useState, useEffect } from "react";
import axios from "axios";
import { useDispatch } from "react-redux";

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 login = (event) => {
    axios
      .post("http://localhost:8000/login", {
        LoginID: LoginID,
        Password: Password,
      })
      .then((response) => {
        console.log(response.data.result[0]);
        if (response.data.message) {
          setLoginStatus(response.data.message);
        } else {
          setLoginStatus(response.data[0].UserFullName);
          setEmail(response.data.result[0].UserEmailID);
          setLogID(response.data.result[0].LoginID);
          setId(response.data.result[0].UserID);
        }
      });
  };

  const dispatch = useDispatch();

  const handleSubmit = (e) => {
    e.preventDefault();
    dispatch(
      login({
        name: LoginStatus,
        LoginId: logID,
        email: email,
        id: id,
        loggedIn: true,
      })
    );
  };

  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;

商店.js：

import { configureStore } from "@reduxjs/toolkit";
import userReducer from "../features/userSlice";

export default configureStore({
  reducer: {
    user: userReducer,
  },
});

userSlice.js

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

export const userSlice = createSlice({
  name: "user",
  initialState: {
    user: null,
  },
  reducers: {
    login: (state, action) => {
      state.user = action.payload;
    },
    logout: (state) => {
      state.user = null;
    },
  },
});

export const { login, logout } = userSlice.actions;
export const selectUser = (state) => state.user.user;
export default userSlice.reducer;

标签： javascriptreactjsredux

解决方案

根据我的口味，您应该从呼叫主体dispatch获取有关成功登录的信息。您当前正在做的是调度呼叫结果（没有从 中返回）。thenaxiosloginundefinedlogin

这是关于调度如何工作的 redux 文档的链接：https ://react-redux.js.org/api/hooks#usedispatch

编辑

假设我们仍然使用原始代码，如果你做了类似的事情，一切都应该正常：

login_component.js

// import
>>> import { login as loginAction } from '<PATH_TO_USERSLICE.JS>' <<<


// where the login function is declared
  const login = (event) => {
    axios
      .post("http://localhost:8000/login", {
        LoginID: LoginID,
        Password: Password,
      })
      .then((response) => {
        console.log(response.data.result[0]);
        if (response.data.message) {
          setLoginStatus(response.data.message);
        } else {
          setLoginStatus(response.data[0].UserFullName);
          setEmail(response.data.result[0].UserEmailID);
          setLogID(response.data.result[0].LoginID);
          setId(response.data.result[0].UserID);
>>>          dispatch(loginAction(response.data.user[0])); <<<
        }
      });
  };

免责声明实际上并没有运行它，但这应该可以。

推荐阅读