我有一个authState(是一个布尔值)，它告诉你用户是否登录了.我有一个主布局，我与我的所有组件共享.它在使用效果中有这样的逻辑
const isLogged = useSelector(selectAuthState);
const router = useRouter();
useEffect(() => {
if (isLogged) {
router.push('/')
}else{
router.push('/login')
}
}, [isLogged])
问题是seltAuthState的缺省值是FALSE，所以第一个呈现它的值是FALSE(即使在本地存储中AuthState的实际值是真的)，在第二个呈现中是真实的值(它是真的)，所以我的应用程序GET总是重定向到‘/’路径，因为AuthState的缺省值是FALSE.我如何才能判断Reduxstore 是否‘准备好’或任何我需要的东西，以确保我具有实际的Redux状态？
Redux在创建store 、传递给Reaction-Redux Provider组件以及应用程序被挂载和呈现时就准备好了.真的没有什么需要判断的.
问题是您使用的初始isLogged状态与未经身份验证的用户匹配.通常情况下，被验证不是简单的二进制函数，而实际上是一个三元函数，例如已验证、未验证和未知.如果您无法将状态初始化为"已确认"状态，则应从未知状态开始.
const initialState = {
isLogged: null, // <-- initially unknown
};
const authSlice = createSlice({
name: "auth",
initialState,
reducers: { ... }
});
...
const RouteGuard = () => {
const isLogged = useSelector(selectAuthState);
const router = useRouter();
useEffect(() => {
// Redirect to login page only if confirmed unauthenticated
if (isLogged === false) {
router.replace('/login');
}
}, [isLogged]);
...
// Authenticated not confirmed yet
if (isLogged === null) {
return null; // or loading indicator/spinner/etc
}
// Confirmed authentication
return isLogged
? /* logged in UI */
: null;
};
您提到过您在本地存储中有一些身份验证状态.您也许能够从本地存储中初始化状态.如果没有存储任何内容，则返回null，因此您仍然需要上面的组件逻辑来处理UI.
示例:
const initialState = {
isLogged: JSON.parse(localStorage.getItem("authState")), // whatever was persisted, or null
};
const authSlice = createSlice({
name: "auth",
initialState,
reducers: { ... }
});
...