Redux와 PURE React Native를 통합하는 방법을 알아봅시다!!

TL; DR

[x] 저장소 생성(리듀서에서)

[x] 스토어 사용(사랑스러운 앱에서)

[x] 작업 만들기

[x] 상태를 소품에 매핑

[x] 동작을 소품에 매핑

Tales of Redux: 전설

깊이 파고들기 전에 달콤한 비유로 주요 개념을 배워봅시다. 상점은 창고 또는 창고이며 정말 큰 창고입니다. 쌀, 옥수수, 옥수수 등을 보관할 수 있습니다. 감속기는이 상점을 관리하는 역할을하는 로봇과 같습니다. 그들은 이곳의 관리인입니다. 이 장소에서 물건을 회수하거나 넣거나 제거하고 싶다면 그들이 우리를 도울 것입니다. 우리는 편지에 몇 가지 명령을 작성하고 선택적으로 물건도 전달합니다. 그들은 이 편지를 읽고 우리가 통과한 물건을 받고 우리 편지에 따라 행동할 것입니다. 이 편지를 행동이라고합니다. 이제 이 옥수수 7개도 가게에 놓아달라는 편지를 씁니다. 이 옥수수를 넣는 것이 동작이고 이 편지와 함께 전달한 7개의 옥수수를 페이로드라고 합니다. 이제 기억하세요. 상태는 우리가 저장하는 항목이고 작업은 작업을 수행하기 위해 봇에 보내는 일명 발송 명령의 문자입니다. 도움이 되었기를 바랍니다. 이제 재미있는 일을 시작합시다 :)

패키지 설치

먼저 필요한 모든 패키지를 설치합시다

npm i redux react-redux @reduxjs/toolkit

1장: 스토어 만들기

우리는 Redux와 관련된 모든 것을 단일 폴더에 보관하여 모든 것을 체계적으로 유지합니다. 그럼 시작하겠습니다.

먼저 스토어를 생성해 보겠습니다. 스토어는 창고의 일부를 관리하는 리듀서(봇)의 모음입니다. 각각은 상태(또는 initState)라고도 하는 저장소와 작업 처리기를 포함합니다.

간단히 말해서 감속기는 initState에서 수행되는 작업을 기반으로 하는 if 문의 모음입니다. 리듀서 함수(일반적으로 if 문을 기반으로 함)에서 반환하는 것은 무엇이든 해당 리듀서의 새/업데이트된 상태가 됩니다.


스토어 생성

/* ----------------------
.       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장: 작업 만들기

Action은 "type"및 "payload"속성을 포함하는 객체를 반환하는 함수일 뿐입니다. 감속기는 이 개체에 대해 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장: state와 action을 props에 매핑하기

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장: 비동기 스토리지 통합

VERY NEXT 블로그를 계속 지켜봐주세요 :) BLAST가 될 것입니다

무엇 향후 계획?

1. Pure React Native를 사용한 비동기 스토리지

2. Pure React Native를 사용한 프로젝트

3. 앱 개발에 대한 추가 정보

4. 플레이스토어에 배포하는 방법

5. JavaScript/TypeScript를 사용한 미친 짓

6. 모든 서버에 대한 자동화된 테스트 작성

7. Expo를 사용하여 NO XP로 Android 앱을 만드는 방법

(apk 생성 포함)

의심의 여지가 있습니까?

의견을 남기거나 Twitter에서 @SilveLEAF로 연락하거나

나에 대해 더 알고 싶어? 여기와!
SilvenLEAF.github.io