Использование useEffect для реагирования на изменения состояния - PullRequest
Новая
       42

Использование useEffect для реагирования на изменения состояния

1 голос
/ 14 апреля 2020

Я немного новичок в хуках, и я использую шаблон, который я не знаю, желательно или нет. То, что я делаю, - это смешиваю редукцию с хуками useEffect так, чтобы при каждом значимом изменении состояния срабатывал один из моих хуков и обновлялось какое-то состояние.

Например, если в моем редукторе есть поле ошибки. Я пишу что-то вроде этого. 

useEffect(() => {
    if(state.error && !state.error.open) {
      showSnackbar(state.error.text)
    }
}, [state.error])

, и я очищаю ошибку, когда пользователь отклоняет панель закусок.

Или

Если я хочу реагировать на нажатие кнопки с получением некоторых данных и меняю страницу, которую я использую:

(Причина, по которой я явно настраиваю пользователя, на который нажали, заключается в том, что когда пользователь нажимает кнопку «Назад» на следующей странице, я не перенаправляюсь на страницу снова, поскольку данные все еще присутствуют в хранилище .) 

useEffect(() => {
   if(buttonClicked && state.someData.id > 0) {
    history.push('/route');
}
}, [state.someData, buttonClicked]);


handleClick = () => {
    dispatch(actions.fetchSomeData());
    setUserClicked();
}

В моем компоненте иногда есть 7-8 useEffects, обрабатывающих разные вещи, и большинство из них имеют условное поведение.

Много раз я вижу код, подобный этому: 

const result = await dispatch(someAction);
if (result.payload.error)
{
 //...
}
else
{
 history.push(...);
}

Имеет ли этот шаблон какое-то преимущество перед использованием нескольких хуков жизненного цикла?

Может быть, я использую первый способ, потому что он кажется более декларативным? Но хорошо ли иметь много useEffects? В приведенном выше коде я обработал ошибку и успех в двух хуках.

Спасибо.

1 Ответ

1 голос
/ 15 апреля 2020

Если вы пишете слишком много useEffect, это неявный показатель того, что ваши компоненты слишком велики. Вы должны начать изучать создание меньших функциональных компонентов / компонентов без состояния (не обязательно делать какую-либо разметку). Несколько страниц кода на компонент - это максимальный размер для хорошо структурированного кода. Обновление: вот код без эффекта: 

if(buttonClicked && state.someData.id > 0) {
    return <Redirect to="/route" />
}

handleClick = () => {
    dispatch(actions.fetchSomeData());
    setUserClicked();
}
...