如何在浏览 React 组件时维护 redux 存储的全局状态答案

【问题标题】：how to maintain the global state of the redux store while navigating through react components如何在浏览 React 组件时维护 redux 存储的全局状态
【发布时间】：2022-10-01 00:35:33
【问题描述】：

问题在于登录时的 \"useNavigate\" 挂钩，我想重定向到 Profil 组件而不会丢失 redux 存储的全局状态。

这是我的应用组件

import Profile from \'./components/Profile.jsx\';
import Login from \'./components/Login.jsx\';
import Register from \'./components/Register.jsx\';
import { Routes, Route } from \'react-router-dom\';

function App() {
  return (
<>
    <Routes>
      <Route path=\'/login\' element={ <Login />  } />
      <Route path=\'/register\' element={ <Register />  } />
      <Route path=\'/profile\' element={ <Profile />  } />
    </Routes>
</>
  );
}
export default App

这是我的登录组件：

import React, { useState } from \"react\";
import { useNavigate } from \'react-router-dom\';
import { useLoginMutation } from \"../services/api\";

const Login = (props) => {
  
  const [username, setUsername] = useState(\"\");
  const [password, setPassword] = useState(\"\");

  const redirect = useNavigate();

  const [login, { isLoading }] = useLoginMutation();

  const onChangeUsername = (e) => {
    const username = e.target.value;
    setUsername(username);
  };
  const onChangePassword = (e) => {
    const password = e.target.value;
    setPassword(password);
  };



  const loginHandler = async (e) => {
    e.preventDefault();



      try {
        const response = await login({ username, password }).unwrap()
        if (response.data.accessToken) {
        localStorage.setItem(\"user\", JSON.stringify(response.data));
      }
      redirect(\'/profile\');

    } catch (err) {

      console.log(err);
    }

  };

  return (
    <div className=\"col-md-12\">

      <div className=\"card card-container\">
        <img
          src=\"//ssl.gstatic.com/accounts/ui/avatar_2x.png\"
          alt=\"profile-img\"
          className=\"profile-img-card\"
        />

        <form className=\'flex flex-col justify-around\' >
          
       
              <>
                <label>Username</label>
                <input value={username} name=\"username\" placeholder=\'username\' onChange={onChangeUsername} className=\'p-1\' />
                <label>Password</label>
                <input value={password} name=\"password\" placeholder=\'password\' onChange={onChangePassword} className=\'mb-3 p-1\' />
              
                <button className=\'bg-blue-400 p-2 border rounded-md text-white font-bold \' onClick={loginHandler}>Login</button>
               
              </>
        
        </form>

      </div>
    </div>
  );
};


export default Login

这是一个屏幕截图。

提交后，突变被删除

我知道重定向时，页面会重新加载，但我不知道如何在不重新加载的情况下导航

虽然我没有收到任何答案，但我认为解决方案是将您的全局状态保存在 localStorage
除此之外，我们在文档中学习redux的方式有点混乱，您认为您的整个应用程序状态应该在商店中，但只有像用户的身份验证和购物车这样的小数据，但是产品和用户等数据可能非常庞大，您无法将其存储在 localStorage 中。

标签： reactjs redux

【解决方案1】：

[我正在使用带有 Typescript 的 React ]
使用（例如）import { useNavigate } from "react-router"; const navigate = useNavigate(); 和 navigate("/login/"); 对我有用，而使用 <Navigate> 标签效果不佳。我根本没有使用 localStorage，但是由于我不使用它，所以状态是通过刷新来重置的。无论如何，它在某种意义上看起来很棘手。

【讨论】：