Реагировать на useEffect и componentWillUnmount с Redux - PullRequest
Новая
       33

Реагировать на useEffect и componentWillUnmount с Redux

0 голосов
/ 05 августа 2020

Есть страница профиля. Здесь props.profile() загружается каждый раз, когда я захожу в свой профиль. Он обновляет хранилище Redux и в основном добавляет пользователя в состояние. Также есть кнопка logout. После выхода из системы он перенаправляется на домашнюю страницу, действие и редуктор очищают состояние Redux и удаляют токен из localStorage.

Если я go на страницу моего профиля и выхожу из системы перед профилем загружает , затем, хотя я уже нажимал кнопку logout, props.profile() все равно загружается. Как на этом изображении .

Я думаю, что с моим useEffect что-то не так, потому что компонент не отключается при нажатии кнопки logout. 

useEffect(() => {
        props.profile();

        return;
    }, [props]);

Также есть return;, но я не уверен, что с этим делать.

Желаемый результат: если я нажму кнопку выхода, я хочу, чтобы компонент отключился и просто очистился состояние.

Действие ВЫХОДА: 

export const logout = () => (dispatch) => {
    localStorage.removeItem("token");
    dispatch({
        type: LOGOUT,
    });
};

Редуктор ВЫХОДА: 

case LOGOUT:
            return {
                user: {},
                authenticated: false,
                loading: false,
                error: null,
                token: null,
            };

1 Ответ

1 голос
/ 05 августа 2020

Ваш компонент всегда отключается, независимо от return в вашем useEffect. Что не происходит, так это что-то вызывается при размонтировании .

Попробуйте изменить свой код на что-то вроде этого: 

useEffect(() => {
        props.profile();

        return () => props.logout(); //logout should be your redux action
    }, [props.profile, props.logout]); // Reduce triggers of this method by not leaving `props` here
...