javascript - 通过 useSelector 访问集中存储

问题描述

我有如下登录功能-

function SignIn() {
 const loginInfo = useSelector(state => state.loginDetails);
 const iLoginCreds ={
    userName:'',
    password:'',
    isLoggedIn:false
  }
  
  const dispatch = useDispatch();
  const [loginCreds, setLoginCredentials] = useState(iLoginCreds)
  
  useEffect(() => {
    alert("state changed : "+loginCreds.isLoggedIn);
    
  }, [loginCreds])
  
  function checkIfSignedIn()
  {
    axios.get(`https://localhost:44301/api/login/ValidateLogin`)
         .then(res=>{ 
           console.log(JSON.stringify(res.data));
           setLoginCredentials({
            ...loginCreds,
            isLoggedIn:res.data
          });
            dispatch(StoreUserAuthenticationStatusAction(res.data));
         });
  }
  if(loginInfo.isLoggedIn==true)
  {
    return (
      <MainPage></MainPage>
    )
  }
  else
  {
    return (
               ...
               ...
               <FormGroup>
                <Button style={{width:'100%',backgroundColor:"#FCB724",color:"black",fontWeight:"bold"}} onClick={checkIfSignedIn}  >Sign in using our secure server</Button>
            </FormGroup>
            )
  }

减速机指数：-

import { combineReducers } from "redux";
import {SaveLoginStatusReducer} from  "./LoginReducers"

export const reducers=combineReducers({
    loginDetails:SaveLoginStatusReducer
})

问题 -

什么时候if(loginInfo.isLoggedIn==true)，我从useSelector一开始就提取，我想渲染到MainPage. 但不知何故看不到，数据是从中央存储中获取的。即使状态已更新，页面也不会呈现到 MainPage。

useEffect当状态发生变化时，我能够得到警报，因为我已经使用过。它显示“真实”。

编辑1：-

当我使用时 if(loginCreds.isLoggedIn==true)，我可以看到MainPage，但是当我尝试从商店中检索它时if(loginInfo.isLoggedIn==true)，我不明白。

编辑2：-

Action.js -

export const StoreUserAuthenticationStatusAction=(loginPayload)=>{
    return {
        type:'SaveLoginStatus',
        payload:loginPayload
    }
}

export const SetProductList=(productListPayload)=>{
    return {
        type:'SetProductList',
        payload:productListPayload
    }
}

减速器.js -

const iLoginCreds ={
    userName:'',
    password:'',
    isLoggedIn:false
  }
export const SaveLoginStatusReducer =(state=iLoginCreds,action)=>{
    switch (action.type) {
        case 'SaveLoginStatus':
            return {
                ...state,
                user:action.paylod
            }
            break;
    
        default:
            return state;
    }
}

标签： javascriptreactjsreduxreact-redux

const handleLogin = (e) => { e.preventDefault(); if (user.email === email && user.password === password) { login(); history.push("/main-page"); } }; <Route {...rest} render={(props) => isLogin() ? <Component {...props} /> : <Redirect to="/login" /> } />

javascript - 通过 useSelector 访问集中存储

问题描述

解决方案

推荐阅读