Question

我有一个带有以下内容的“ authentication.reducer.js”：

export default function(state = initialState, action ){
switch(action.type) {
    case SET_CURRENT_USER:
        return {
            ...state,
            isAuthenticated: !isEmpty(action.payload),
            user: action.payload
        }

    default: 
        return state;
}}

以及带有useReducer挂钩的我的提供者上下文。还有一个useEffect Hook，用于在记录了客户端的情况下分派动作“ setCurrentUser”并将“ isAuthenticated”设置为true。

import authReducer from "./reducers/authentication.reducer";
...
const [stateUser, dispatch] = useReducer(authReducer, {
    isAuthenticated: false,
    user: {}
});

useEffect(()=>{
    if (localStorage.jwt) {
        const decoded = localStorage.jwt;

        dispatch(setCurrentUser(decoded));
    }
},[])

我放置了console.log（stateUser.isAuthenticated），它显示“ false”（初始值），然后显示“ true”（调度）。我需要将状态传递给其他子组件，而不需要传递初始值（“ false”）。

我有一个Dashboard组件（仅适用于登录用户），在我这个组件的useEffect中，我需要这样做：

if(!context.stateUser.isAuthenticated) {
        props.history.push('/login');

}

在我的登录名中：

if(context.stateUser.isAuthenticated) {
        props.history.push('/');
}

这有效。如果我已经登录并转到“ /”就可以了，如果我转到“ / login”，则可以重定向到“ /”。

但是问题是分派和useReducer中的重新呈现。状态为：false-> true，则将导致以下效果：输入“ /”->“ / login（false）”->“ /（true）”

如何防止这种影响？ /-> /登录-> / == enter-> false-> true。我需要：输入-> true

Answer 1

我的建议是将isAuthenticated设置为null以启动，并且仅在状态显式设置为true或false时才调用历史记录函数，如下所示：

if (context.stateUser.isAuthenticated === false) {
    props.history.push('/login');
}

if (context.stateUser.isAuthenticated === true) {
    props.history.push('/');
}

请确保使用三元对等进行严格的比较。

有帮助吗？

编辑

如果您要这样做，即使没有用户登录，也需要致电setCurrentUser。

useEffect(()=>{
    const decoded = localStorage.jwt ? localStorage.jwt : "";
    dispatch(setCurrentUser(decoded));
},[])

挂钩useReducer调度2次

1 个答案: