React/Redux: обнаружение и выполнение инструкций перед уничтожением компонента
Ола,
В моем состоянии редукции у меня есть логическое значение isEditing, инициируемое в false, для управления режимом редактирования профиля. Я создаю избыточное действие для переключения этого состояния. Ниже скрин рендера компонента.
В большинстве случаев работает:
Когда я нажимаю «Изменить имя», я переключаюсь на true и отображаю форму редактирования.
Когда я нажимаю «Сохранить» (или «Отмена»), он выполняет (или нет) запрос API, затем переключается на false, отображая исходный компонент.
Но если я начну редактирование, а затем выйду из страницы вручную (через ссылку с логотипом или URL-адрес), а затем вернусь на эту страницу, очевидно, режим редактирования все еще активен в true.
Я хотел бы перевести свое состояние в false, когда я покидаю страницу, но я не нахожу никакой возможности отправить действие до того, как компонент будет уничтожен (например, старый метод программирования класса componentWillUnmount() или эквивалент beforeUnmount VueJS)
PS: я использую реактивный маршрутизатор V6. Кажется, хук был реализован во время бета-тестирования, но так и не был выпущен, и с тех пор никаких новостей :(
Альтернативой является установка значения false при создании компонента с помощью useEffect. Это работает, но я думаю, что это не то место. Я вижу, что режим редактирования открывается, а затем закрывается в моем пользовательском интерфейсе в течение нескольких мс.
заранее спасибо
Ответы 2
Я считаю, что вы могли бы отправить действие в возвращаемом значении useEffect, например useEffect(() => { return () => dispatch(changeEditMode(false)) }, []). Это в основном похоже на componentWillUnmount().
Попробуйте использовать очистку на хук useEffect
useEffect(() => {
// Specify how to clean up after this effect:
return function cleanup() {
// make redux call to toggle edit mode
};
});
Спасибо. И ваше решение, и решение Мауро Тенти сработали. Не могли бы вы сделать игру «Камень, ножницы, бумага, ящерица Спока», чтобы решить между вами, какое решение является лучшим? :D
Но я приму ваше решение, потому что я впервые слышу об очистке(), и я думаю, что было бы интересно провести некоторое исследование.
О, очистка не является зарезервированным словом реакции. Так что оба ответа равны, идеально :)
Тип возвращаемого значения useEffect — это функция, но ее имя делает ее более читабельной. Пример, который я опубликовал, взят непосредственно из документов.
Спасибо. И ваше решение, и решение Мирчи Матеи сработали. Не могли бы вы сделать игру «Камень, ножницы, бумага, ящерица Спока», чтобы решить между вами, какое решение является лучшим? :D