Оригинальный адрес:Stop Asking if React Hooks Replace Redux
Многие коллеги задавали мне похожие вопросы:
«Если мы используем хуки в нашем проекте, нужен ли нам Redux?»
«Сделают ли React Hooks Redux устаревшим? Могу ли я делать все, что Redux может делать с помощью Hooks?»
Выполните поиск в Google, и вы обнаружите, что эти вопросы часто задают.
«Заменят ли React Hooks Redux?», самый простой ответ — «не обязательно».
Более нюансированный, но вежливый ответ: «Ну, это зависит от типа проекта, над которым вы работаете».
Ответ, который я более склонен всем говорить, таков: «Я не уверен, что вы понимаете, о чем говорите». Есть несколько причин, по которым вопрос «заменят ли React Hooks Redux» изначально некорректен. первый:
Redux всегда был необязательным
Из статьи Дэна Абрамова (одного из создателей Redux) [You Might Not Need Redux] Видно, что если не нужно использовать, то и заменять ничего не надо.
Redux — это библиотека JavaScript, и если вы используете React (другую библиотеку JavaScript), то для использования Redux вам также необходимо загрузить библиотеку JavaScript React-Redux в ваше приложение. Использование зависимых библиотек в вашем проекте увеличит размер пакета, что увеличит время загрузки вашего приложения. По этой причине вам не следует использовать некоторые библиотеки, такие как jQuery, Redux,MobX(еще одна библиотека управления состоянием) или даже React, если у вас нет четкой причины их использовать.
Когда люди спрашивают «заменят ли хуки Redux», они часто считают, что их React-приложение должно использовать одно или другое. Это не тот случай, если вы пишете приложение, которое не имеет большого количества состояний для хранения, или ваша структура компонентов достаточно проста, чтобы избежать чрезмерной передачи свойств, и на основе функций, предоставляемых самим React, ваше состояние уже достаточно управляем, независимо от того, с хуками или без, управление состоянием для этих ситуаций не имеет особого смысла.
Даже если у вас есть много состояний или структуры компонентов React, которые скручиваются и разветвляются, как старые корни, вам все равно не нужна библиотека управления состоянием. Передача свойств может быть громоздкой, но React предоставляет вам множество вариантов управления состоянием, а хуки определенно могут помочь вам красиво организовать ваше состояние. Redux — это легкая библиотека, но ее сложно настроить, она увеличивает размер упаковки и имеет множество компромиссов. Есть множество причин, по которым вам следует отказаться от его использования в вашем проекте, и они довольно убедительны.
Вам не всегда нужен Redux, а это значит, что у вас все еще есть много причин для его использования. Если ваш проект использует Redux с самого начала, то это, вероятно, веская причина, независимо от того, использует он это или нет: организация (предсказуемость состояния приложения, единый поток данных, полезность в сложных приложениях), промежуточное ПО, мощные инструменты разработки Redux и возможности отладки. Если у вас есть причина использовать Redux, React Hooks не сделает ее бесполезной. Если вам нужен был Redux раньше, он нужен вам и сейчас. Это потому что:
React Hooks и Redux не пытаются решить одну и ту же проблему
Redux — это библиотека управления состоянием, а хуки — это некоторые из недавно обновленных функций React, которые позволяют вашим функциональным компонентам делать то, что могут делать компоненты классов.
Итак, написание приложений React без компонентов класса внезапно делает библиотеки управления состоянием устаревшими?
конечно, нет!
пройти черезДокументацияВидно, что React Hooks были разработаны в основном по этим трем причинам:
- Сложно повторно использовать логику между компонентами класса
- Жизненный цикл часто содержит необъяснимую не связанную логику
- Компоненты класса трудны для понимания машинами и людьми.
Обратите внимание, что мотивация делать что-то, непосредственно связанное с управлением состоянием, отсутствует.
Сказав это, React Hooks предоставляют некоторые возможности для управления состоянием приложения. особенноuseState,useReducerа такжеuseContextметоды, предоставляющие новые способы поддержания вашего состояния, которые оказались лучше и организованнее, чем предыдущие варианты, предоставляемые React.
Но в этих ловушках нет ничего нового или волшебного, и они также не делают управление состоянием устаревшим, потому что правда такова:
React Hooks не позволяют вашему приложению делать то, что раньше было невозможно
Правильно, теперь вы можете писать функциональные компоненты, чтобы делать то, что раньше было возможно только с компонентами класса, но эти функциональные компоненты не могут делать некоторые вещи, которые не могут делать компоненты класса, за исключением лучшей организации и возможности повторного использования кода. Они не обязательно делают ваше приложение лучше, они улучшают опыт разработчиков.
useStateа такжеuseReducerПросто управление состоянием компонентов и их принципами работы аналогичных компонентовthis.stateа такжеthis.setStateто же самое, вам все равно нужно передать свой реквизит.
useContextЭто функция, которую все считают включенной в Redux board, потому что она позволяет вам обмениваться состоянием приложения между компонентами, не передавая его через реквизиты, но на самом деле она не делает ничего нового.context APIТеперь часть React,useContextпросто чтобы тебе не пришлось<Consumer>Пакеты также могут использовать контекст. А некоторые разработчики используют контекст для управления состоянием всего приложения, что не является целью разработки контекста. Из документации видно, что:
Контекст предназначен для обмена данными, которые можно считать «глобальными» для дерева компонентов React, таких как текущий аутентифицированный пользователь, тема или предпочитаемый язык.
Контекст предназначен для обмена данными и может рассматриваться как «глобальный» в дереве компонентов React, например, авторизованные в настоящее время пользователи, темы или предпочитаемые языки.
Другими словами, вещи, которые, как ожидается, не будут часто обновляться.
В документации также рекомендуется экономно использовать контекст, потому что «это затрудняет повторное использование компонентов». Они также напоминают разработчикам, что если разработчик не будет осторожен, контекст может легко вызвать ненужную повторную визуализацию.
Я видел проекты, успешно использующие React Context для управления состоянием приложения, и это возможно и вариант. Но управление состоянием — это не совсем то, для чего предназначены контексты, и Redux и другие библиотеки управления состоянием предназначены для решения этой конкретной задачи.
Кроме того, React Hooks ни в коем случае не означает смерть Redux, потому что, если вы посмотрите наНедавно обновленная документация React-Redux, ты поймешь:
React-Redux тоже имеет свои хуки
Правильно, React Hooks помогают возродить React-Redux и устранить некоторые из его болевых точек, что далеко от «замены».
Я глубоко погрузился в React-Redux в другой статье., тут главное. Перед хуками вы должны определитьmapStateToPropsа такжеmapDispatchToPropsдве функции и использоватьconnectОберните свой компонент, чтобы создать компонент более высокого порядка, который передает метод отправки и некоторые из сохраненных в Redux состояний, которые вы указываете в функции сопоставления, для передачи компоненту в качестве реквизита.
Давайте взглянем на очень простой пример приложения-счетчика (слишком простое, чтобы даже нуждаться в Redux, но здесь в основном для того, чтобы показать некоторую информацию). Предположим, мы определили хранилище Redux иincrement,decrementДва создателя экшена (Полный исходный код здесь).
import React from 'react';
import {connect} from 'react-redux';
import * as actions from '../actions/actions';
class App extends React.Component {
constructor(props) {
super(props);
}
render() {
const {count, increment, decrement} = this.props;
return (
<div>
<h1>The count is {count}</h1>
<button onClick={() => increment(count)}>+</button>
<button onClick={() => decrement(count)}>-</button>
</div>
);
}
}
const mapStateToProps = store => ({
count: store.count
});
const mapDispatchToProps = dispatch => ({
increment: count => dispatch(actions.increment(count)),
decrement: count => dispatch(actions.decrement(count))
});
export default connect(mapStateToProps, mapDispatchToProps)(App);
Так раздражает! Разве не было бы более дружелюбно, если бы нам не нужно было оборачивать компонент в компонент более высокого порядка и позволять компоненту получать значение хранилища Redux? Да, поэтому и появляются крючки. Крючки предназначены для повторного использования кода и устранения «ада гнездования», вызванного компонентами более высокого порядка. Ниже приведен идентичный компонент, преобразованный в функциональный компонент с использованием хуков React-Redux.
import React from 'react';
import * as actions from '../actions/actions';
import {useSelector, useDispatch} from 'react-redux';
const App = () => {
const dispatch = useDispatch();
const count = useSelector(store => store.count);
return (
<div>
<h1>The count is {count}</h1>
<button onClick={() => dispatch(actions.increment(count))}>+</button>
<button onClick={() => dispatch(actions.decrement(count))}>-</button>
</div>
);
}
export default App;
Разве это не красиво? вкратце,useSelectorПозволяет сохранять частичные значения хранилища Redux в ваши компоненты.useDispatchЕще проще, он просто предоставляет вам функцию отправки, которую вы можете использовать для отправки обновлений состояния в хранилище Redux. Лучше всего то, что вам больше не нужно писать эти уродливые функции отображения и использоватьconnectфункция для переноса компонента. Теперь, когда все хорошо содержится в вашем компоненте, он стал более кратким, поэтому его легче читать и он более организован. Дело в том:
Нет необходимости сравнивать React Hooks и Redux
Нет сомнений в том, что эти две технологии хорошо дополняют друг друга. React Hooks не заменяет Redux, они просто дают вам новые и лучшие способы организации ваших приложений React. Если вы в конечном итоге решите использовать Redux для управления состоянием, это позволит вам писать более связанные компоненты.
Так что, пожалуйста, больше не спрашивай».Заменят ли React Hooks Redux?".
Вместо этого начните спрашивать себя"Какое приложение я делаю? Какое государственное управление мне нужно? Работает ли Redux или он немного перегружен? Можно ли использовать хуки или следует использовать компоненты класса? Если я решу использовать Redux и React Hooks (или MobX и React Hooks, или Redux и jQuery без React — это допустимые варианты, в зависимости от того, что вы делаете), как я могу сделать эти технологии взаимодополняющими и гармоничными. Как насчет сосуществования?".