Основы React Redux

React Redux основы работы этих библиотек вместе
Метки: / / /

В этой статье мы разберём основы React Redux, точнее как работать с Redux связки с React.

Также стоит сказать, что мы уже писали статью где рассказывали про Redux в отрыве от React.js, называться «Основы Redux», сначала вам стоит прочитать её, так как здесь не будет много про сам Redux, а только про то, как с ним работать на React.

Установка Redux для React:

Для начала давайте разберём, как происходит установка Redux для React, тут вам нужно сначала скачать сам Redux, а потом уже специальный.

Для этого вводите эти команды:

То есть здесь сделали всё так, как я сказал выше, но если вы используете TypeScript, то вам для скачивания нужно использовать не много другую команды, вот она:

Ну и конечно же надо скачать сам React, как это сделать, вы можете посмотреть по этой ссылке.

React Redux основы:

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

Как видите сначала мы подключаем React и React-dom, после берём компонент Provider, от react-redux и также импортируем наш store, который мы создали за кадром, и основной компонент App.

Дальше создадим обычный React элемент, но не много по-другому, вот что мы сделаем:

Тут мы сделали рендеринг React компонентов, но мы наш компонент в котором будет происходить вся логика завернули React-readux компонент Provider.

Этот компонент похоже на React компонент Context, только для Redux, суть в том, что он позволяет использовать состояние которое он нам даёт на многих уровнях, то есть, вы сможете использовать его не только внутри компонента App, но в тех компонентах, которые внутри этого компонента, и даже в компонентах, компонентах App, то есть везде.

Следующее давайте доработаем компонент App сделаем его на подобие как из прошлой части, то есть просто будет число, которое мы будем увеличивать или уменьшать на один.

Примечание:

Повторюсь, здесь мы не будем рассматривать работу Redux, мы покажем только как он работает в паре c React.

Если хотите знать как работать с Redux, то почитайте статью «Основы Redux»

Я вам сейчас покажу не большой код, в котором я сделал классовый компонент React, вот он:

Как видите в начале как обычно мы подключаем все зависимости, это React, connect от react-redux, о нём чуть ниже, и диспетчеры, которые мы сделали в предыдущей статье про основы Redux.

Внутри компонента, у нас всё как обычно, создаём конструктор, откуда берём props, создаём два метода, для прибавления и убавления числа, ну и конечно же, есть функция для рендера и как можете заметить у нас там две кнопки и выводим значение пропса counter.

Самое последние мы создаём объект где храним диспачи и функцию которая возвращает объект состояния которое есть в Redux.

В последнею mapStateToProps, передаётся state, состояние, из него мы берём counter, так как мы помним из прошлой статье что мы имеем комбинированный редюсер, и нужные нам данные в нём, храниться в counter.

Последние, как вы можете заметить, мы экспортируем не совсем чистый компонент App, делаем мы это через функцию connect(), которая подключаем наш компонент к основному Redux, и передаёт ему в качестве пропсов всё состояние, которое указали в mapStateToProps и диспетчеры, которые указаны в mapDispatchToProps, конечно передаём их в качестве параметров в connect(), после в круглых скобках передаём наш App.

В целом на этом основы работы, теперь вы можете запустить сайт и у вас это будет отображаться.

Важно:

Redux с классовыми компонентами работает достаточно крива, по этому рекомендуется его использовать в функциональных компонентах с использование хуков, но об этом в другой статье.

Вывод:

В этой статье вы прочитали основы работы с React Redux, думаю вы поняли как с этим работать.

Подписываетесь на соц-сети:

Оценка:

1 Звезда2 Звезды3 Звезды4 Звезды5 Звезд
(Пока оценок нет)
Загрузка...

Поделится:

Также рекомендую:

Подписаться
Уведомить о
guest
0 комментариев
Межтекстовые Отзывы
Посмотреть все комментарии
0
Оставьте комментарий! Напишите, что думаете по поводу статьи.x
()
x