ReactJS - Простое понимание Redux с Redux-Saga

Redux не такой сложный, как вы думаете!

Вернемся снова в ReactJS. Тем не менее, на языке вольного стиля JavaScript!

И снова, мы вернемся к разговору об управлении состоянием, прямо сейчас мы используем Redux! И я собираюсь сделать простое приложение с этой React & Redux-Saga, чтобы вы могли полностью понять, что произошло.

Если вы не знаете, что такое управление состоянием, я предлагаю вам сначала прочитать мою статью, в которой рассказывается об базовом управлении состоянием с помощью Context API с React.

Тогда перейдем к теме ...

Требование следовать этой статье

1. Очень простой JavaScript (ES6).
2. Очень простой ReactJS.

Инструменты, необходимые для работы в этой статье

1. NodeJS

Важным является сам NodeJS, потому что NodeJS поставляется с NPM, который в данном случае мы будем использовать для установки ReactJS. Вы можете скачать здесь (https://nodejs.org/ru). Я рекомендую установить версию LTS, на момент написания этой статьи я использовал v12.2.0 .

2. Текстовый редактор

Существует множество текстовых редакторов, я предпочитаю использовать Sublime Text 3 в этой статье, потому что он гладкий и легкий, который вы можете скачать здесь (https://www.sublimetext.com/). .
Это нормально, если вы хотите использовать текстовые редакторы, такие как VScode или Atom, просто выберите инструменты, которые вам подходят.

3. Расширение Redux Devtools

Это необязательно, расширение Redux Devtools предназначено для помощи в разработке React с Redux, это расширение Redux Devtools позволяет разработчику отслеживать, что происходит в приложении, например, получение данных с сервера и т. Д. Это расширение браузера. Если вы используете Chrome, вы можете скачать его здесь (https://chrome.google.com/webstore/detail/redux-devtools/lmhkpmbekcpmknklioeibfkpmmfibljd?hl=en).

Что такое Redux?

Согласно документации, Redux ...

Redux - это контейнер с предсказуемым состоянием для приложений JavaScript.

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

Для очень простого объяснения: это контейнер для вашего состояния. Например, у вас есть состояние задачи, а затем вы управляете своим состоянием задачи внутри сокращения. Потому что redux используется для управления состоянием, которое содержит все ваши состояния, которые будут взаимодействовать с компонентом или пользователем. Не запутайтесь, вы поймете суть, если будете следовать этой статье.

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

Что же тогда такое Redux-Saga?

Согласно документации Redux-Saga…

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

Redux-Saga в основном является промежуточным программным обеспечением для вашего Redux. Зачем мне нужно промежуточное ПО для Redux?

Ответ. С простым базовым Redux вы можете выполнять только простые синхронные обновления, отправляя действие. По промежуточного слоя расширяет возможности магазина и позволяет писать асинхронную логику, которая взаимодействует с ним. - Согласно документации Redux-Thunk (еще одно промежуточное ПО, которое есть в Redux).

Вы можете прочитать больше Redux-Saga в документации здесь, это очень цепляет.

Почему Redux-Saga?

По сути, Redux-Saga мощнее Redux-Thunk. Почему? согласно документации вот объяснение ...

1. Он использует функцию ES6, называемую генераторами, чтобы сделать эти асинхронные потоки удобными для чтения, записи и тестирования. (если вы не знакомы с ними, вот несколько вводных ссылок) Таким образом, эти асинхронные потоки выглядят как ваш стандартный синхронный код JavaScript. (вроде как _1 _ / _ 2_, но у генераторов есть еще несколько интересных функций, которые нам нужны)
2. Возможно, вы уже использовали redux-thunk для обработки получения данных. В отличие от redux-thunk, вы не попадете в ад обратных вызовов, вы можете легко протестировать свои асинхронные потоки, а ваши действия останутся чистыми.

Стоит ли использовать Redux?

Правильный ответ зависит от обстоятельств. Поскольку вы не можете заставить свое приложение использовать Redux каждый раз, когда запускаете проект, вы должны провести опрос в своей ситуации, независимо от того, соответствует ли ваше приложение с помощью redux или нет. Или, может быть, вашему приложению нужен единый источник правды для вашего состояния, тогда используйте Redux.

Создание приложения с помощью Redux и Redux-Saga

Какое приложение мы собираемся создать? Чтобы упростить эту статью, я собираюсь сделать приложение Todo, вы можете легко понять, и я использую JSONPlaceholder для API, это хорошо для практики. Вот простые шаги по реализации Redux с Redux-Saga. Давайте начнем.

Я предполагаю, что вы уже установили NodeJS, потому что позже мы займемся NPM.

1. Установка ReactJS (пропустите это, если вы уже установили ReactJS)

Мы собираемся установить ReactJS глобально, для этого откройте ваш терминал / CMD и начните вводить эту команду.

npm i -g create-react-app

2. Создание проекта React

После успешной установки ReactJS вы создадите проект. Для этого введите эту команду. Я назову это реакцией-управлением-состоянием для проекта, вы можете называть это как хотите.

npx create-react-app react-state-management

3. Установка зависимостей для React Project

После создания React Project вы можете войти в этот проект или открыть его в текстовом редакторе и начать установку некоторых зависимостей с помощью этой команды.

Эти зависимости содержат сокращение, которое мы будем использовать для управления состоянием.

npm i -S redux react-redux redux-devtools-extension redux-saga axios

Я собираюсь повторить, что там происходит.

• redux, по сути, сам Redux.
• react-redux, пакет, который мы будем использовать для соединения между React и Redux.
• redux-devtools-extension, это просто пакет для интеграции нашего приложения React-Redux с расширением, которое мы устанавливаем для отладки Redux.
• redux-saga, конечно, это пакет промежуточного программного обеспечения redux-saga, которое мы собираемся использовать.
• axios, - это простой HTTP-клиент для взаимодействия с сервером.

4. Создание структуры папок для нашего приложения

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

так что файл будет выглядеть вот так.

Все, что связано с redux, будет помещено в папку redux.

Если вам неудобно смотреть на это изображение, посмотрите эту структуру папок, но она все та же.

src/
  components/
    TodoForm.js
    Todo.js
    TodoItem.js
  redux/
    actions/
      todo-action.js
    api/
      todo-api.js
    reducers/
      index.js
      todo-reducer.js
    sagas/
      index.js
    store.js

5. Делаем store.js для Redux

Первое, что мы собираемся построить, - это подготовить наш Redux. Итак, я собираюсь создать папку внутри папки src и назову ее redux. Внутри него мы создадим файл под названием store.js. Этот файл будет использоваться нашим приложением для подключения к Redux. Итак, вот код. Код очень понятен.

Но не запускайте этот код, он еще не завершен, мы должны создать еще один файл, чтобы store.js работал.

6. Действия

Что есть действие? В этом случае действие будет заполнено константами, которые определяют, что будет делать наше приложение. Например, запрос к серверу. и код выглядит примерно как const GET_TODOS = GET_TODOS.

Просто так? Ага. Это полезно, потому что это уменьшит количество ошибок в написании в нашем приложении, когда мы сделаем запрос редуктору. Итак, внутри папки redux, которую мы только что создали, я создам папку под названием actions, внутри папки actions, я собираюсь создайте файл с именем todo-action.js. Вот код.

7. Изготовление редуктора

Итак, что такое редуктор? Редуктор в ReactJS означает определение изменений состояний в нашем приложении. Если вы хотите возиться или изменить состояние, контролируйте все свои состояния здесь. В redux ваше состояние определяется здесь.

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

Итак, все еще внутри папки redux я создам новую папку под названием reducers, внутри папки redux, я собираюсь сделать файл с именем todo-reducer.js. Вот код.

Если вы увидите этот код выше, вы увидите, что редуктор используется для изменения состояния на новое значение, верно? Код там не требует пояснений.

8. Регистрация редуктора

На этом этапе мы зарегистрируем здесь редьюсер, который мы только что создали выше. Код довольно простой. Здесь, все еще внутри папки reducer, я собираюсь создать файл с именем index.js, этот файл также называется rootReducer, который мы использовали в store.js. Вот код, код очень хорошо объяснен.

9. Создание API

Здесь мы сделаем запрос на взаимодействие с сервером.

Я собираюсь создать в папке src папку под названием api (в нижнем регистре). Внутри папки api, Я собираюсь создать файл под названием todo-api.js. Этот файл содержит функцию, которая будет делать запрос к серверу. Вот код.

Это простая функция для вызова запроса к серверу.

10. Создание саги

Ядро всех тех кодов и файлов, которые мы только что создали, будет работать прямо на этом этапе. Я собираюсь создать папку внутри папки src, я назову ее саги. В этой папке sagas я создам файл с именем todo-saga.js. В этом todo-saga.js будет наше действие и api, которое будет отправлять редуктор. Вот код.

Думаю, вы путаете: «ЧТО ТАМ ПРОИСХОДИЛ »? Я собираюсь повторить, что там происходит.

1. Redux-Saga, использующий генераторы из ES6, в основном, как async/await, но использует yield в качестве ключевого слова, все, что заключено в генераторы должен вызываться с помощью yield. Если вы хотите узнать больше о генераторах, вы можете посетить эту ссылку.
2. put предназначен для отправки редуктора из саги, put принимает объект внутри него, в нашем случае мы используем type и полезная нагрузка как объект.
3. call используется для вызова функции, в данном случае мы вызываем функцию, которая взаимодействует с сервером. call, принимающий функцию в первом аргументе, а второй - бесплатный, в данном случае используется для передачи полезной нагрузки функции.
4. takeLatest - для запуска асинхронного запроса. Но при срабатывании takeLatest любая асинхронная задача, выполнявшаяся ранее, будет отменена. Это хорошо для нашего случая, в данном случае мы не хотим запускать задачу создания каждый раз, когда пользователь делает запрос, когда уже сделал запрос.
5. takeEvery, также используется для запуска асинхронного запроса. Но если в фоновом режиме выполняется асинхронная задача, она не будет отменена, в противном случае , он будет выполняться одновременно асинхронно. Все генераторы, использующие takeEvery,, будут называться наблюдателями.
6. Обратите внимание: вы видите, что я все время делаю суффикс под названием REQUESTED? И вы видите, что я отправляю другое действие? Это потому, что если вы отправляете одни и те же действия, вы получите бесконечный цикл!

После этого, все еще находясь в папке sagas, я создам файл с именем index.js, он также называется rootSaga, который мы импортировали в store.js. Вот код.

Я собираюсь повторить то, что там произошло.

По сути, код там rootSaga правильный. Но если у вас есть еще саги, вы должны превратить новое порождение в новую сагу, что-то вроде spawn(anotherSaga)

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

Надеюсь, то, что я там говорю, имеет смысл. Если вы хотите узнать больше, вы можете обратиться к Справочнику по API об этой саге о сокращении. Вот ссылка:

Https://redux-saga.js.org/docs/api/

11. Как заставить наше приложение работать

Хорошо, вот главное в этой статье. На этом этапе мы подготовим это приложение и Redux к использованию.

11.1. Создание компонента Todo.

Я собираюсь создать папку под названием components внутри папки src. Внутри я создам файл под названием Todo.js для компонента, вот код.

Код очень понятен и объясняет, как взаимодействовать с redux. По сути, когда вы хотите подключить свой компонент к Redux, вы должны:

• Принесите connect из react-redux.
• Получите действия по отправке саги редуктору. (Не забудьте импортировать REQUESTED), потому что мы собираемся отправлять его внутри export default function* todoSaga(), а не функцию типа getAllTodos
• mapStateToProps и mapDispatchToProps предназначены для получения состояния и отправки, и вы передадите эти переменные в connect , первый аргумент предназначен для состояния, а второй аргумент - для отправки. Эта функция отправки из mapDispatchToProps аналогична put из саги, она принимает объект, в данном случае мы использовали type и полезная нагрузка в качестве объекта.

11.2. Создание компонента TodoForm.

Тем не менее, в папке компоненты я создам файл с именем TodoForm.js. Вот код.

Код такой же, как у Todo.js, но другой функционал.

11.3. Создание компонента TodoItem.

Тем не менее, в папке components я создам файл с именем TodoItem.js. Вот код.

Обратите внимание, я использую Двойной щелчок для удаления задачи.

11.3. Обновите App.js

Чтобы это приложение работало, просто обновите файл App.js до него.

По сути, вам просто нужно передать store.js провайдеру, используя этот

<Provider store={store}>
  // Your app in here...
</Provider>

Вот и все! Наконец-то мы можем запустить это приложение! Чтобы запустить это приложение, напишите эту команду

npm start 

Вот результат приложения, и я открываю инструменты разработки redux с помощью Chrome. Как видите, инструменты разработки redux отслеживают то, что я там делаю.

Я знаю, что это выглядит некрасиво, но здесь мы сосредоточены на Redux и Redux-Saga. Вы абсолютно можете создать свой собственный стиль. Причина, по которой я делаю это, - для простоты.

Заключение

Использование Redux хорошо для большого масштабируемого приложения, когда вам нужен единый источник достоверной информации для вашего приложения. Причина использования Redux в том, что его легко поддерживать, сделать код более структурированным и сделать приложение React более надежным. Как я уже упоминал, существует промежуточное ПО под названием redux-thunk. Может быть, вы тоже захотите попробовать? Но в последний раз, когда я использую redux-thunk, у меня запутанный код, не знаю, ха-ха.

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

Спасибо, увидимся в следующей статье!

Вот код для этой статьи.