Redux - это бесплатная библиотека управления состоянием, которая работает на интерфейсе приложений JavaScript, управляя состоянием каждого компонента в пользовательском интерфейсе. Библиотека Redux способствует разделению кода, который управляет и хранит данные в приложении, и кода, который управляет событиями и их влиянием на различные компоненты пользовательского интерфейса приложения.
Одним из главных достоинств Redux является его гибкость. Вы можете использовать Redux практически с любым фреймворком или библиотекой JavaScript.
Команда Redux создала три библиотеки, а именно Redux, React-Redux и Redux Toolkit. Все три библиотеки работают вместе, чтобы дать вам максимальную отдачу от опыта разработки React, и в этой обучающей статье вы узнаете, как их использовать.
Важность React-Redux
Хотя Redux является независимой библиотекой управления состоянием, для ее использования с любой интерфейсной структурой или библиотекой требуется библиотека привязки пользовательского интерфейса. Библиотека привязки пользовательского интерфейса обрабатывает логику взаимодействия с контейнером состояний (или хранилищем), которая представляет собой набор предопределенных шагов, которые соединяют интерфейсную структуру с библиотекой Redux.
React-Redux - это официальная библиотека привязки пользовательского интерфейса Redux для приложений React, поддерживаемая командой Redux.
Связанный: Как создать свое первое приложение React с помощью JavaScript
Установка Redux в каталог вашего проекта
Есть два способа получить доступ к библиотеке Redux в вашем приложении React. Команда Redux рекомендует использовать следующую команду при создании нового проекта React:
npx create-react-app my-app --template redux
Приведенная выше команда автоматически настраивает Redux Toolkit, React-Redux и хранилище Redux. Однако, если вы хотите использовать Redux в существующем проекте React, вы можете просто установить библиотеку Redux в качестве зависимости с помощью следующей команды:
npm установить redux
Далее следует UI-библиотека привязки React-Redux:
npm установить React-Redux
И набор инструментов Redux:
npm install @ reduxjs / toolkit
Библиотека Redux Toolkit также важна, потому что она делает процесс настройки хранилища Redux быстрым и легким.
Создание Redux Store
Прежде чем вы сможете начать работать с библиотекой Redux, вам необходимо создать контейнер состояния Redux (или хранилище). Создание хранилища Redux необходимо, потому что это объект, который хранит глобальное состояние приложения Redux.
React, как и большинство интерфейсных фреймворков, имеет точку входа в своих приложениях, которая представляет собой файл или группу файлов на верхнем уровне. В index.html и index.js файлы - это два файла, которые находятся на верхнем уровне приложения React, который находится выше App.js файл и все компоненты в приложении.
Так что index.js file - идеальное место для создания магазина Redux.
Обновление index.js с помощью Redux Store
импортировать React из 'React'
импортировать ReactDOM из React-dom
импортировать приложение из './App'
импортировать reportWebVitals из "./reportWebVitals"
импортировать {configureStore} из "@ reduxjs / toolkit"
импортировать {Provider} из 'response-redux'
импортировать пользователя из './reducers/user'
const store = configureStore ({
редуктор: {
Пользователь
}
})
ReactDOM.render (
,
document.getElementById ('корень')
)
reportWebVitals ();
В приведенном выше коде есть что распаковать, но лучше всего начать с configureStore функция. Вы сразу увидите преимущества установки библиотеки Redux Toolkit в качестве configureStore функция создает хранилище Redux всего с тремя строчками кода.
Ваше приложение React не узнало бы, что магазин Redux существует без компонент поставщика, который поступает из библиотеки привязки React-Redux. Компонент провайдера принимает одну опору (хранилище) и оборачивается вокруг приложения React, делая хранилище Redux глобально доступным.
Третий и последний новый импорт в index.js файл выше - это пользовательский редуктор, что жизненно важно для работы вашего магазина Redux.
Почему важен редуктор?
Назначение редуктора - изменить Состояние компонента пользовательского интерфейса на основе выполненное действие. Например, если вы создаете онлайн-приложение для учебного заведения, вам потребуется, чтобы каждый пользователь входил в приложение, чтобы получить доступ с помощью компонента входа. Еще один отличный компонент для этого приложения - активный пользовательский компонент, который будет отображать имя или адрес электронной почты каждого пользователя, когда они войдут в ваше приложение.
В приведенном выше примере активный пользовательский компонент будет изменяться каждый раз, когда пользователь выполняет действие по входу в свою учетную запись. Таким образом, этот пример - идеальная ситуация для редуктора. Также важно помнить, что редуктор может выполнять свою функцию только из-за Redux хранилище, которое дает ему доступ к состоянию любого компонента и действиям, которые необходимы для выполнения его обязанности.
Создание пользовательского редуктора
импортировать {createSlice} из "@ reduxjs / toolkit";
экспорт const userSlice = createSlice ({
имя: "пользователь",
initialState: {value: {email: ""}},
редукторы: {
логин: (состояние, действие) => {
state.value = action.payload
},
}
})
экспорт const {логин} = userSlice.actions
экспорт по умолчанию userSlice.reducer;
Внутри React srcкаталог вы можете создать каталог редуктора, где вы будете хранить пользовательский редуктор и любой другой редуктор, который вы хотите добавить в свой магазин Redux. В user.js файл выше импортирует createSlice функция из Redux Toolkit.
В createSlice функция принимает название, начальное состояние, а объект редуктора который хранит несколько функций редуктора. Однако приведенный выше объект редукторов имеет только одну функцию редуктора, называемую авторизоваться который принимает состояние и действие в качестве аргументов и возвращает новое состояние.
Файл user.js экспортирует редуктор входа в систему. Компонент входа импортирует его и использует в useDispatch () крюк.
Создание компонента входа в систему
импортировать React из React;
импортировать ссылку из '@ mui / material / Link';
импортировать TextField из '@ mui / material / TextField';
импортировать типографику из '@ mui / material / Typography';
импортировать {Button, Box} из '@ mui / material';
импортировать {useDispatch} из 'response-redux';
импортировать {логин} из '../reducers/user';
импортировать {useState} из «реагировать»;
function Signin () {
const dispatch = useDispatch ()
const [электронная почта, setEmail] = useState ('')
const handleSubmit = () => {
отправка (логин ({email: email}))
}
возвращение (
sx = {{
мой: 8,
дисплей: 'гибкий',
flexDirection: 'столбец',
alignItems: 'центр',
}}>Войти
label = "Адрес электронной почты"
обязательный
id = "электронная почта"
name = "электронная почта"
маржа = "нормальный"
onChange = {(e) => setEmail (e.target.value)}
/>
label = "Пароль"
обязательный
id = "пароль"
name = "пароль"
type = "пароль"
маржа = "нормальный"
/>
href = "#"
sx = {{mr: 12, mb: 2}}
>
забыть пароль?
вариант = "содержится"
sx = {{mt: 2}}
onClick = {handleSubmit}
>
Войти
);
}
экспортировать вход по умолчанию;
Компонент входа выше использует библиотека MUI. Он создает простую форму входа, для которой требуются адрес электронной почты и пароль пользователя. Нажатие кнопки входа вызовет функция onClick, который вызовет handleSubmit функция.
В handleSubmit функция использует useState () и useDispact () крючки вместе с редуктор входа в систему чтобы сделать адрес электронной почты активного пользователя доступным в магазине Redux. Из магазина Redux каждый компонент приложения React теперь имеет доступ к электронной почте активного пользователя.
Связанный: Крючки: Герой Реагирования Следующий активный пользовательский компонент извлекает адрес электронной почты активного пользователя с помощью useSelector () хук и отображает его в пользовательском интерфейсе приложения.
Файл ActiveUser.js
импортировать React из "react";
import {useSelector} из "react-redux";
function ActiveUsers () {
const user = useSelector ((состояние) => state.user.value)
возвращение (Активные пользователи
{user.email}
);
}
Обновленный файл App.js
Взгляните на этот фрагмент кода:
импортировать React из "react"; импортировать ActiveUsers из "./components/ActiveUsers"; импортировать Signin из "./components/Signin";
function App () {
возвращение (
);
}
экспортировать приложение по умолчанию;
В App.js Приведенный выше файл отображает как активных пользователей, так и компоненты входа в вашем приложении React, создавая следующий вывод в вашем браузере:
Если пользователь входит в приложение, компонент активных пользователей немедленно обновляется новым адресом электронной почты активного пользователя.
Обновленный интерфейс
Когда следует использовать Redux?
Redux - одна из самых популярных библиотек управления состоянием, главным образом потому, что она отлично справляется с созданием предсказуемого и надежного кода. Если многие компоненты в приложении используют одно и то же состояние приложения, Redux - идеальный выбор.
Используя приведенный выше пример школы, компонент входа, активный пользовательский компонент, участник класса компонент, и даже компонент профиля потребует адрес электронной почты пользователя (или какой-либо другой уникальный идентификатор). Вот почему Redux здесь лучший вариант.
Однако, если у вас есть состояние, которое используется не более чем одним или двумя компонентами, лучшим вариантом может быть React props.
Если вам нужны советы по использованию реквизита в ReactJS, вы обратились по адресу.
Читать далее
- Программирование
- Реагировать
- JavaScript
- Программирование
Кадейша Кин (Kadeisha Kean) - разработчик программного обеспечения полного стека и автор статей по техническим / технологическим вопросам. У нее отличная способность упрощать некоторые из самых сложных технологических концепций; производить материал, понятный любому новичку в технологии. Она увлечена писательством, разработкой интересного программного обеспечения и путешествиями по миру (с помощью документальных фильмов).
Подписывайтесь на нашу новостную рассылку
Подпишитесь на нашу рассылку технических советов, обзоров, бесплатных электронных книг и эксклюзивных предложений!
Нажмите здесь, чтобы подписаться