Давайте узнаем, как интегрировать Redux в PURE React Native!!!
TL;DR
- [x] Создаем магазин (из редукторов)
- [x] Использовать магазин (в нашем прекрасном приложении)
- [x] Создать действия
- [x] Сопоставление состояния с реквизитами
- [x] Сопоставить действие с реквизитами
- Рассказы о Redux: нерассказанные легенды
- Установка пакетов
- ГЛАВА 1: Создание хранилища
- ГЛАВА 2: Использование магазина
- ГЛАВА 3: Создание действий
- ГЛАВА 4: Сопоставление состояния и действия с реквизитами
- Глава 5: Интеграция асинхронного хранилища
- Что будет дальше?
- 1. Async Storage с чистым React Native
- 2. Проект с Pure React Native
- 3. Подробнее о разработке приложений
- 4. Как развернуть приложение в playstore
- 5. Безумные вещи с JavaScript/TypeScript
- 6. Написание автоматических тестов для любого сервера
- 7. Как создать Android APP без XP с помощью Expo
- Есть сомнения?
Рассказы о Redux: нерассказанные легенды
Прежде чем мы погрузимся в глубину, давайте изучим основную концепцию с помощью милой аналогии. Store — это хранилище или склад, это действительно большой сарай, в котором мы можем хранить рис, кукурузу, маис и т.д. Редукторы — это как роботы, которые управляют этим складом. Они являются хранителями этого места. Если мы хотим достать, положить или убрать что-то из этого места, они нам помогут. Мы пишем некоторые команды в письме и по желанию передаем вещи. Они прочитают это письмо, получат вещи, которые мы передадим, и будут действовать в соответствии с нашим письмом. Это письмо называется действиями. Допустим, мы пишем письмо, в котором говорим: пожалуйста, поставьте эти 7 маисов на склад. Помещение этих маисов — это действие, а 7 маисов, которые мы передали вместе с этим письмом, называются полезной нагрузкой. Теперь запомните: состояние — это то, что мы храним, а действие — это письмо с командой, которое мы отправляем ботам для выполнения действия. Надеюсь, это помогло. Теперь давайте приступим к самому интересному 🙂
Установка пакетов
Сначала установим все необходимые пакеты
npm i redux react-redux @reduxjs/toolkit
ГЛАВА 1: Создание хранилища
Мы будем хранить все, что связано с Redux, в одной папке, чтобы все было организовано. Итак, давайте начнем.
Сначала создадим магазин. Магазин — это набор редукторов, ботов, которые управляют своей собственной частью хранилища. Каждый из них содержит хранилище, также известное как состояние (или initState), и обработчик действий.
Проще говоря, reducer — это коллекция операторов if, основанных на действиях, выполняемых над initState. То, что мы возвращаем из функции reducer (обычно основанной на операторах if), становится новым/обновленным состоянием этого reducer.
Создать магазин
/* ----------------------
. method 1
---------------------- */
import { configureStore } from "@reduxjs/toolkit";
export const store = configureStore({
reducer: {
app: appSettingsReducer,
progress: userProgressReducer,
user: userProfileReducer,
}
})
export interface IRootState {
app: IAppSettingState,
progress: IUserProgressState,
user: IUserProfileState,
}
/* ----------------------
. method 2
---------------------- */
import { combineReducers, createStore } from "redux";
const rootReducer = combineReducers({
app: appSettingsReducer,
progress: userProgressReducer,
user: userProfileReducer,
});
export const store = createStore(rootReducer)
export interface IRootState {
app: IAppSettingState,
progress: IUserProgressState,
user: IUserProfileState,
}
Создать редуктор
export interface IAppSettingState {
themeColor: string,
isSoundOn: boolean,
isVibrationOn: boolean,
isDarkTheme: boolean,
isTutorialShown: boolean,
}
const initState: IAppSettingState = {
themeColor: 'red',
isSoundOn: true,
isVibrationOn: true,
isDarkTheme: false,
isTutorialShown: true,
}
export const appSettingsReducerTypes = {
updateThemeColor: 'UPDATE_THEME_COLOR',
updateIsDarkTheme: 'UPDATE_IS_DARK_THEME',
}
interface IAction {
type: string,
payload?: any,
}
const appSettingsReducer = (state = initState, action: IAction) => {
switch (action.type) {
case appSettingsReducerTypes.updateThemeColor:
return {
...state,
themeColor: action.payload,
};
case appSettingsReducerTypes.updateIsDarkTheme:
return {
...state,
isDarkTheme: action.payload,
};
default:
return state;
}
}
export default appSettingsReducer;
ГЛАВА 2: Использование магазина
Импортируйте магазин, который мы создали в вашем входном файле, и используйте его
import React from 'react';
import { Provider } from 'react-redux';
import { store } from './app/store/store';
export default function App() {
return (
<Provider store={store}>
<RootDrawer />
</Provider>
);
}
ГЛАВА 3: Создание действий
Действие — это не что иное, как функция, которая возвращает объект, содержащий свойства «тип» и «полезная нагрузка». Редукторы выполняют свои операторы if на этом объекте. Этот объект является действием для данного редуктора.
Функции действия по желанию принимают полезную нагрузку в качестве аргумента и возвращают ее в полезной нагрузке.
import { appSettingsReducerTypes } from "../reducers/appSettingsReducer";
export const updateThemeColor = (color: string)=>{
return {
type: appSettingsReducerTypes.updateThemeColor,
payload: color,
}
}
export const updateIsDarkTheme = (isDarkTheme: boolean)=>{
return {
type: appSettingsReducerTypes.updateIsDarkTheme,
payload: isDarkTheme,
}
}
const appSettingsActions = {
updateThemeColor,
updateIsDarkTheme,
}
export default appSettingsActions;
ГЛАВА 4: Сопоставление состояния и действия с реквизитами
import React from 'react'
import { NavigationProp } from '@react-navigation/native';
import { connect } from 'react-redux';
import { IRootState } from '../../../store/store';
import { IAppSettingState } from '../../../store/reducers/appSettingsReducer';
import { IUserProgressState } from '../../../store/reducers/userProgressReducer';
import userProgressActions from '../../../store/actions/userProgressAction';
interface propsInterface extends IAppSettingState, IUserProgressState {
navigation: NavigationProp<any>,
progress: {
updateRank: typeof userProgressActions.updateRank,
updateLevel: typeof userProgressActions.updateLevel,
updateXP: typeof userProgressActions.updateXP,
},
}
function ActionScreen(props: propsInterface) {
return (
<HomeScreen/>
);
}
const mapStateToProps = (state: IRootState) => {
return {
...state.app,
...state.progress,
}
}
const mapDispatchToProps = (dispatch: any) => {
return {
progress: {
updateRank: (rank: string) => dispatch(userProgressActions.updateRank(rank)),
updateLevel: (level: number) => dispatch(userProgressActions.updateLevel(level)),
updateXP: (xp: number) => dispatch(userProgressActions.updateXP(xp)),
},
}
}
export default connect(mapStateToProps, mapDispatchToProps)(ActionScreen)
Глава 5: Интеграция асинхронного хранилища
Следите за ОЧЕНЬ СЛЕДУЮЩИМ блогом 🙂 Это будет БЛЕСК
Что будет дальше?
1. Async Storage с чистым React Native
2. Проект с Pure React Native
3. Подробнее о разработке приложений
4. Как развернуть приложение в playstore
5. Безумные вещи с JavaScript/TypeScript
6. Написание автоматических тестов для любого сервера
7. Как создать Android APP без XP с помощью Expo
(включая генерацию apk)
Есть сомнения?
Оставьте комментарий или свяжитесь со мной @SilveLEAF в Twitter или Linkedin.
Хотите узнать обо мне больше? Заходите сюда!
SilvenLEAF.github.io