reactjs - React/Redux 不更新状态

Question

我刚开始使用 redux，我想将它包含在我现有的应用程序中。我想要做的是存储我的登录响应，以便我在其他页面上使用用户详细信息。

LandingPage.js

import { useDispatch } from 'react-redux'

function LandingPage(){
  const dispatch = useDispatch();
  const authLogin = async()=>{
  const response = await axios.get('/api',)
  let responseValue = response.data.success
  if(responseValue === true) {
     const parsedData = JSON.parse(response.data.resp)
     dispatch({
       type: 'SAVE_AUTH',
       payload: {
         isLoggedIn: responseValue,
         username: parsedData.data.user.userName,
         token: parsedData.data.token
       }
     })
  }
useEffect(() => {
authLogin();
  }, [])
return (
<div>
  <label>Authenticating....</label>
  <Login1 /> //updated based on @LindaPaiste's answer
</div>
export default LandingPage;

MainLanding.js

import React from 'react'
import Login1 from './Login1'
function MainLanding(){
return(
    <div>
        <h1>User Login Details</h1>
        <Login1 /> //Nothing hapens here
    </div>
)
}
export default MainLanding;

Login1.js

import React from 'react'
import LoginDetailsx from './LoginDetailsx'
import { useSelector } from 'react-redux'
function Login1(){
const userLoginDetails = useSelector((state) => state.loginDetails)
console.log('userLoginDetails',userLoginDetails)
return(
    <div>
        <h2>Login Details</h2>
        <LoginDetailsx isLogin={userLoginDetails.isLoggedIn} username={userLoginDetails.username} token={userLoginDetails.token}/>
        })}
        
    </div>
)}
export default Login1;

loginDetailsReducer.js

const initialState = [
{
    isLoggedIn: false,
    
}];

const loginDetailsReducer = (state = initialState, action) => {
const { type, payload } = action;
console.log('typex',type)
console.log('payloadx',payload)

switch(type){
    case "SAVE_AUTH":
        alert('dasdasd')
        return payload;
    case "LOGOUT_AUTH":
        return initialState
    default:
        return state;
}
}
export default loginDetailsReducer;

rootReducer.js

import { combineReducers } from 'redux'
import loginDetailsReducer from '../reduxReducers/loginDetailsReducer'
const rootReducer = combineReducers({
  loginDetails: loginDetailsReducer
});
export default rootReducer;

store.js

import { createStore } from 'redux'
import rootReducer from '../reduxReducers/rootReducer'
const store = createStore(rootReducer);
export default store;

LoginDetailsx.js

import React from 'react'
function LoginDetailsx(props){
return(
    <div>
        <p>Details: isloggedin: {props.isloggedin}, username: {props.username}, token: {props.token}</p>
    </div>
   )
}
export default LoginDetailsx;

这是我在成功登录后在 MainLanding.js 上得到的。

这就是我在 LandingPage.js console.log 上得到的

Answer 1

状态形状

虽然不一定是问题，但loginDetails 状态应该是一个数组 确实没有意义。一次只能有一个用户登录，所以它应该只是一个包含用户详细信息的对象。这使您的 reducer 非常简单(一如既往 Redux Toolkit 可以使它更简单)。

您还需要添加注销案例。 isLoggedIn 应该是 boolean 而不是 string。我个人认为当没有登录用户时，undefined 比 '' 对于 username 和 token 更有意义但这取决于你。

const initialState = {
    isLoggedIn: false,
    // no username or token when logged out
};

const loginDetailsReducer = (state = initialState, action) => {
    const { type, payload } = action;
    switch(type) {
        case "SAVE_AUTH":
            // replace the state with the action payload
            return payload;
        case "LOGOUT_AUTH":
            // revert to initial state
            return initialState;
        default:
            return state;
    }
}

export default loginDetailsReducer;

登录

我想说的是，像 API 调用这样的异步操作需要在组件的 useEffect Hook 中完成。您可以使用一个空的依赖数组在组件挂载时运行一次效果。

useEffect(() => {
    authLogin();
}, []);

但现在我正在查看您的图片，看起来您正在执行响应按钮点击的操作，所以这也很好。

axios 处理 JSON 解析，因此您不需要使用 JSON.parse()(除非您的 API 返回奇怪的数据)。

function MainLanding() {
  const isLoggedIn = useSelector((state) => state.loginDetails.isLoggedIn);

  // access dispatch function
  const dispatch = useDispatch();

  // define the function to log in
  const authLogin = async () => {
    const response = await axios.get("/api");
    const data = response.data;
    if (data.success === true) {
      dispatch({
        type: "SAVE_AUTH",
        payload: {
          isLoggedIn: true,
          username: data.resp.user.userName,
          token: data.resp.data.token
        }
      });
    }
  };

  return (
    <div>
      {isLoggedIn ? (
        <>
          <h1>User Login Details</h1>
          <Login1 />
        </>
      ) : (
        <button onClick={authLogin}>Log In</button>
      )}
    </div>
  );
}