Крюк использовать Редуктор отправка 2 раза - PullRequest
Новая
       6

Крюк использовать Редуктор отправка 2 раза

1 голос
/ 20 марта 2019

У меня есть «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;
}}

И моим провайдерским контекстом с использованием Reducer Hook.И 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 "(отправка).Мне нужно передать состояние другим дочерним компонентам, но не нужно передавать начальное значение («ложь»).

У меня есть компонент Dashboard (только для зарегистрированных пользователей), и во мне нужно использовать EffectEffect этого компонента, который мне нуженДля этого: 

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

}

И в моем логине: 

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

Это работает.Если я вошел в систему и захожу на «/», то все в порядке, а если я захожу на «/ login», это перенаправление на «/".

Но проблема заключается в повторном рендеринге в диспетчере иuseReducer.состояние: false-> true, тогда оно вызывает этот эффект: введите "/" -> "/ login (false)" -> "/ (true)"

Как предотвратить этот эффект?/ -> / login -> / == enter-> false-> true.Мне нужно: введите -> true

1 Ответ

0 голосов
/ 20 марта 2019

Я бы рекомендовал установить 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));
},[])
...