Redux в PURE React Native

Давайте узнаем, как интегрировать Redux в PURE React Native!!!

TL;DR

  • [x] Создаем магазин (из редукторов)
  • [x] Использовать магазин (в нашем прекрасном приложении)
  • [x] Создать действия
  • [x] Сопоставление состояния с реквизитами
  • [x] Сопоставить действие с реквизитами

Рассказы о 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

Оцените статью
Procodings.ru
Добавить комментарий