Включая React, Typescript и Redux-saga.
Введение
Redux Toolkit - это мощный набор инструментов для эффективной разработки Redux. Особенно, когда вы используете Typescript в своем проекте. Потому что все мы знаем, сколько строк дополнительного кода мы получаем, когда хотим типизировать наше redux-store. Это становится большой проблемой, когда ваш проект становится огромным и становится невозможным поддерживать столько бесполезного кода в рабочем состоянии. Все эти проблемы с набором текста решаются с помощью Redux Toolkit, и я покажу вам, как это сделать! Но даже если вы не используете Typescript в своем проекте, вы также можете многому научиться для себя, и в целом ваш код будет сокращен более чем на 50%.
Также в этом примере я покажу вам, как успешно подключить redux-saga, чтобы все это работало вместе, как швейцарские часы. Мне не очень нравится redux-thunk, я считаю, что redux-saga - не очень сложная вещь, и ее следует использовать даже в небольших проектах. Если вы никогда с ним не работали, советую дочитать статью до конца и обещаю, что вы все поймете и удивитесь, насколько легко и удобно им пользоваться.
Прежде чем мы начнем, я поделился исходным кодом:
Живая демонстрация | Источник на GitHub
Установка пакетов
# npm npm install react-redux @reduxjs/toolkit redux-saga # yarn yarn add react-redux @reduxjs/toolkit redux-saga
Создание магазина
ConfigureStore - это улучшенная и расширенная версия стандартного Redux createStore. У него по умолчанию включены DevTools, а также есть встроенное промежуточное ПО redux-thunk, которое мы отключили, и вместо этого будет использовать саги redux. Я также рекомендую отключить DevTools при производственной сборке.
Создание срезов
Что такое createSlice? Это функция, которая принимает начальное состояние, объект, полный функций-редукторов, и «имя среза», и автоматически генерирует создателей действий и типы действий, которые соответствуют редукторам и состоянию.
CreateSlice также принимает extraReducers. Я расскажу о них, когда будем создавать действия. А пока считайте это аналогом обычного редюсера, который принимает только любые действия, а не только действия своего среза.
Проще говоря, slice - это обычное место для редукторов и действий. Посмотрим:
Примечание:
createReducerиcreateSliceRedux Toolkit автоматически используют Immer внутри, чтобы вы могли написать более простую неизменяемую логику обновления с использованием изменяющегося синтаксиса. Это помогает упростить большинство реализаций редуктора.
Создание действий
В предыдущем разделе, где мы создавали срезы, мы создавали редукторы и действия внутри них. И вполне логично задать вопрос: зачем нам отдельный файл с действиями, если они у нас уже есть? Ответ прост: действия в срезах нужны только для изменения значения определенного редуктора. Здесь мы создадим 2 типа действий:
1) Действия по вызову саг. Здесь все просто, мы будем вызывать их в теле компонента, чтобы запускать наши саги.
2) Действия для extraReducers. Это действие, которое при вызове изменяет значения во многих редукторах. В этом его отличие от обычного действия в срезе, которое может изменять только значение собственного редуктора.
Создание саг
Saga - это функция генератора, которая помогает упростить управление побочными эффектами (HTTP-запросы к внешним службам, доступ к хранилищу браузера и выполнение операций ввода-вывода).
Он принимает действие, из которого мы получаем полезную нагрузку. Это дает нам возможность выбросить объект props из функционального компонента и использовать его в нашей саге. В этом случае сага делает запрос api для внешнего ресурса и устанавливает ответ редуктору «сообщений».
Предоставление redux-store нашему приложению для реагирования
Подключение Redux к компонентам с помощью useActions и useTypedSelector
UseActions
Мы создаем ловушку и возвращаем из нее результат выполнения bindActionCreators, в который мы бросаем наши действия и отправляем.
UseTypedSelector
Это то же самое, что и useSelector, но только типизированное. С его помощью нам не нужно прописывать в каждом типе компонентов для каждого свойства, которое мы получаем из магазина. Все будет происходить автоматически, и в следующем разделе я вам это покажу.
Главный функциональный компонент (App.tsx)
Это наша основная составляющая. В нем связываем наши крючки. На 9-й строке подключаем типизированные действия, на 11-й строке получаем типизированное состояние из магазина. Обратите внимание, что здесь все напечатано. Затем мы вызываем эти действия в определенных местах по мере необходимости. Основное преимущество моего подхода к работе с Redux Toolkit заключается в том, что мы вводим все символы вне функционального компонента. Обратите внимание, что у нас нет намека на типы в теле компонента, но если вы попытаетесь добавить в действие другой тип, вы получите сообщение об ошибке. В этом примере набор текста работает отлично.
Заключение
Я надеюсь, что смог объяснить вам, как построить правильную и типизированную работу с Redux Toolkit. Если у вас есть вопросы, ознакомьтесь с исходным кодом.
