Управление состоянием React в 2020 году

React.js
Управление состоянием React в 2020 году

Оригинальный адрес:medium.com/better-pro Страна…
Адрес перевода:GitHub.com/small-T/note…
Авторские права на эту статью принадлежат оригинальному автору, а перевод предназначен только для ознакомления.

Нужны ли нам по-прежнему фреймворки для управления состоянием, такие как Redux и Mobx?

введение

Внедрение хуков React, несомненно, изменило статус-кво управления состоянием.

До этого было сложно разделить логику, связанную с состоянием, между компонентами. Теперь мы можем справиться с этим, просто абстрагировав хук (например:useUserLogin).

Возникает вопрос, зачем нам все еще нужна структура управления состоянием? В этом посте я представлю свой процесс принятия решений: Как управлятьstate. Я также поделюсь своим мнением о том, нужен ли нам еще фреймворк управления состоянием в 2020 году.

Что изменилось?

Как мы определяли состояние до хуков? По сути, есть два варианта: определить локальное состояние внутри компонента или установить глобальное состояние с помощью структуры управления состоянием (например, Mobx/Redux).

локальное состояние (до хуков)

export class UserList extends Component {
    state = {
        isLoading: false,
        hasError: false,
        users: []
    }

    searchUsers(value) {
        this.setState({isLoading: true});

        api.get(`/users?searchKey=${value}`)
            .then((data) => this.setState({users: data}))
            .catch(() => this.setState({hasError: true}))
            .finally(() => this.setState({loading: false}));
    }

    render() {
        if (this.state.isLoading) {
            // render loading spinner
        }
        
        if (this.state.hasError) {
            // render error message
        }

        return (
            <div>
                <input onChange={(event) => this.searchUsers(event.target.value)} />
            </div>
        )
       
    }
}

Далее мы объясним проблемы, возникающие при наличии только этих двух вариантов. Однако, предполагая, что наше состояние не обязательно должно быть глобальным, мы хотим повторно использовать состояние в нескольких компонентах, как мы определяем локальное состояние.

В приведенной выше демонстрации мы могли бы захотеть повторно использовать состояния загрузки и ошибки, что было невозможно до использования хуков. Единственный вариант — повторно использовать его с Redux. В Redux любой компонент, которому нужно искать пользователей, просто отправляет действие (searchUsers()) и прослушивать изменения в глобальном состоянии.

Однако использование этих глобальных состояний (Redux/Mobx) приводит к некоторым проблемам:

  • больше шаблонного кода
  • сложный поток данных
  • Несколько компонентов поддерживают глобальное состояние, что может привести к неожиданным побочным эффектам.

Решение: React Hooks!

К счастью, хуки были представлены в React v16.8. С этого момента становится возможным совместное использование логики, связанной с состоянием, между компонентами.

В приведенной ниже демонстрации мы можем поделиться поведением при загрузке и ошибке:

import {useState} from 'react';

const useRequestHandler = () => {
    const [isLoading, setLoading] = useState(false);
    const [hasError, setError] = useState(false);
    const [data, setData] = useState(null);

    const handleRequest = (request) => {
        setLoading(true);
        setError(false);

        return api.get(request)
            .then(setData)
            .catch(() => setError(true))
            .finally(() => setLoading(false))
    };

    return {isLoading, hasError, data, handleRequest};
};


const UserList = () => {
    const {data, isLoading, hasError, handleRequest} = useRequestHandler();
    
    const searchUsers = (value) => handleRequest(`/users?searchKey=${value}`);
  
    return (
        <React.Fragment>
            {data.map(u => <p>{u.name}</p>)}
        </React.Fragment>
    )
}

больше преимуществ: Если несколько компонентов нуждаются в функции поиска в списке пользователей, мы также можем настроитьuseUserSearchкрюк.

Тем не менее, крючки не панацея. Сохранение состояния в хуке не означает, что он становится одноэлементным объектом, он просто привязывается к компоненту. В некоторых случаях мы хотим сохранить только объект состояния экземпляра (например, загрузить информацию о пользователе только один раз). Это функциональность, предоставляемая структурой управления состоянием.

как, когда и где управлять состоянием

Теперь, когда логика, связанная с состоянием, может быть разделена между несколькими компонентами, как решить, хранится ли состояние в компоненте (локально) или в структуре управления состоянием (глобально)?

На изображении ниже показан мой процесс принятия решений.

Каковы преимущества структуры государственного управления?

Теперь мы знаем, как выбирать между глобальным и локальным. Но зачем нужна структура управления государством в 2020 году? Как это соотносится с React Hooks?

Есть несколько преимуществ:

  • Глобальное определение также означает, что существует только один экземпляр объекта
  • будет загружать удаленные данные только один раз
  • Поддержка инструментов разработки
  • Предоставляет стандартный способ разработки для разработчиков программного обеспечения

Суммировать

Мы видим, как React Hooks встряхивают ландшафт управления состоянием. Благодаря их внедрению стало проще обмениваться логикой, связанной с состоянием, между компонентами.

Однако хуки — это не серебряная пуля, нам все еще нужна структура управления состоянием. Это не означает, что все состояния должны быть глобальными — в большинстве случаев лучше хранить их между компонентами. только вкогда это абсолютно необходимо, перед перемещением состояния в структуру управления состоянием.

Категории