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

Одним из главных достоинств Redux является его гибкость. Вы можете использовать Redux практически с любым фреймворком или библиотекой JavaScript.

Команда Redux создала три библиотеки, а именно Redux, React-Redux и Redux Toolkit. Все три библиотеки работают вместе, чтобы дать вам максимальную отдачу от опыта разработки React, и в этой обучающей статье вы узнаете, как их использовать.

Важность React-Redux

Хотя Redux является независимой библиотекой управления состоянием, для ее использования с любой интерфейсной структурой или библиотекой требуется библиотека привязки пользовательского интерфейса. Библиотека привязки пользовательского интерфейса обрабатывает логику взаимодействия с контейнером состояний (или хранилищем), которая представляет собой набор предопределенных шагов, которые соединяют интерфейсную структуру с библиотекой Redux.

instagram viewer

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.

Как использовать Props в ReactJS

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

Читать далее

доляТвитнутьЭлектронное письмо
Похожие темы
  • Программирование
  • Реагировать
  • JavaScript
  • Программирование
Об авторе
Кадейша Кин (Опубликовано 36 статей)

Кадейша Кин (Kadeisha Kean) - разработчик программного обеспечения полного стека и автор статей по техническим / технологическим вопросам. У нее отличная способность упрощать некоторые из самых сложных технологических концепций; производить материал, понятный любому новичку в технологии. Она увлечена писательством, разработкой интересного программного обеспечения и путешествиями по миру (с помощью документальных фильмов).

Ещё от Kadeisha Kean

Подписывайтесь на нашу новостную рассылку

Подпишитесь на нашу рассылку технических советов, обзоров, бесплатных электронных книг и эксклюзивных предложений!

Нажмите здесь, чтобы подписаться