React Native | redux

Redux 란?

Note:

• Redux는 자바스크립트 앱을 위한 예측 가능한 상태 컨테이너입니다.
• Redux는 여러분이 일관적으로 동작하고, 서로 다른 환경(서버, 클라이언트, 네이티브)에서 작동하고, 테스트하기 쉬운 앱을 작성하도록 도와줍니다.
  여기에 더해서 시간여행형 디버거와 결합된 실시간 코드 수정과 같은 훌륭한 개발자 경험을 제공합니다.
• Redux는 매우 작다(의존 라이브러리 포함 2kB)

---

React Native Redux 설치

리덕스에서 필요한 npm 모듈

npm install @types/react-redux react-redux redux redux-devtools-extension redux-logger redux-promise-middleware redux-thunk redux-logger @types/redux-logger

---

프로젝트 폴더 구조 와 기본 예제

store.ts

import thunkMiddleware from 'redux-thunk';
import {composeWithDevTools} from 'redux-devtools-extension';
import logger from 'redux-logger';
import {createStore, applyMiddleware} from 'redux';
import rootReducer from '../shared/reducer';
import {createPromise} from 'redux-promise-middleware';

const promiseMiddleware = createPromise({
    promiseTypeSuffixes: ['REQUEST', 'SUCCESS', 'FAILURE'],
});

const defaultMiddlewares = [
    thunkMiddleware,
    logger,
    promiseMiddleware,
];

const store = createStore(rootReducer, composeWithDevTools(applyMiddleware(...defaultMiddlewares)));

export default store

redux-promise-middleware 이 모듈의 경우 redux 에서 http 통신 할때 success,fail,ready 대한 상태 변화를 감지하도록 하는 모듈이다.

redux-devtools-extension redux 에서 콘솔로 추적이 가능한데 그부문을 담당하는 모듈중 하나이다.

count.reducer.ts

import {IBaseCount} from "./count.interface";

const ACTION_TYPES = {
    UP_NUMBER: "count/UP_NUMBER",
    DOWN_NUMBER: "count/DOWN_NUMBER",
    SET_NUMBER: "count/SET_NUMBER",
    RESET: "count/RESET"
}

const initialState = {
    number: {} as IBaseCount
}

export type CountState = Readonly<typeof initialState>;

export default (state = initialState, action: any): CountState => {

    switch (action.type) {

        case ACTION_TYPES.UP_NUMBER : {
            return {
                ...state,
                number: {
                    load: false,
                    error: null,
                    data: state.number.data + 1
                }
            }
        }

        case ACTION_TYPES.DOWN_NUMBER : {
            return {
                ...state,
                number: {
                    load: false,
                    error: null,
                    data: state.number.data - 1
                }
            }
        }

        case ACTION_TYPES.SET_NUMBER: {
            return {
                ...state,
                number: {
                    load: false,
                    error: null,
                    data: action.payload
                }
            }
        }

        default: {
            return state
        }

    }
}

export const setNumber = (number: number) => ({type: ACTION_TYPES.SET_NUMBER, payload: number})

export const onUpNumber = () => ({type: ACTION_TYPES.UP_NUMBER})

export const onDownNumber = () => ({type: ACTION_TYPES.DOWN_NUMBER})

Actions, Reducers, 두가지 기능을 담당하는 ts 파일로 action-types 별로 switch 문에서 작성을 한다...

reducer/index.tsx

import {combineReducers} from 'redux'
import count, {CountState} from "../../entity/count/count.reducer";

export interface IRootState {
    readonly count: CountState
}

const rootReducer = combineReducers<IRootState>({
    count,
})

export default rootReducer

reducer 을 한번에 모듈화된것을 캡슐화 하기 위한 ts file 인데 app.tsx 에서 사용이 된다.

App.tsx

import React from 'react';
import {Provider} from 'react-redux';
import store from './config/store';
import RootStackNavigation from "./shared/navigation/root-navigation";

const App = () => {
    return (
        <Provider store={store}>
            <RootStackNavigation/>
        </Provider>
    )
}

export default App;

참조

Redux 공홈