React-Native 리덕스 리액트 실무 사용 패턴

초기 구성하기

스토어 만들기

루트 경로에 redux_store 디렉토리를 생성하고 index.ts 파일을 생성한다.

import { configureStore } from "@reduxjs/toolkit";
import { useDispatch } from "react-redux";
import rootReducer from "./reducer";

const store = configureStore({
  reducer: rootReducer,
  // flipper 와 연동하기 위해서 미들웨어를 사용
  middleware: (getDefaultMiddleware) => {
    if (__DEV__) {
      const createDebugger = require("redux-flipper").default;
      return getDefaultMiddleware().concat(createDebugger());
    }
    return getDefaultMiddleware();
  },
});

export default store;

export type AppDispatch = typeof store.dispatch;
export const useAppDispatch = () => useDispatch<AppDispatch>();

redux-flipper 는 추후 react-native 앱 디버깅을 위해서 필요하여 넣어두었다.

루트 리듀서 만들기

redux_store 디렉토리 아래 reducer.ts 파일을 만든다.

import { combineReducers } from "redux";

import userSlice from "../redux_slices/user";

const rootReducer = combineReducers({
  user: userSlice.reducer,
});

export type RootState = ReturnType<typeof rootReducer>;
export default rootReducer;

• 이 루트 리듀서는 추후에 리덕스 Slice 가 추가될 때, combineReducers({}) 내부에 추가된 슬라이스를 넣어주면 된다.

컴포넌트에서 값 이용하기

• useSelector() 를 통해 값을 가져온다.

function Orders() {
  const orders = useSelector((state: RootState) => state.order.orders);
  // ...
  return <View />;
}

• const dispatch = useAppDispatch() 를 통해 dispatch() 함수를 가져온다.

컴포넌트에서 액션 호출하기

dispatch(orderSlice.actions.rejectOrder(item)) 과 같은 형식으로 호출하면 된다.

액션 만들기

redux_slices 디렉토리 아래에 데이터 도메인명 (ex. order.ts) 으로 파일을 만들고, 내부에 @redux-toolkit 을 이용해 슬라이스 이름, 초기 상태, 리듀서를 작성한다.

새로 slice 를 만든 뒤에는 루트 리듀서에 추가하는 것을 잊지 말자.

import { createSlice, PayloadAction } from "@reduxjs/toolkit";

// Typescript 인터페이스 정의

export interface Order {
  orderId: string;
  start: {
    latitude: number;
    longtitude: number;
  };
  end: {
    latitude: number;
    longtitude: number;
  };
  price: number;
}

export interface InitialState {
  orders: Order[];
  deliveries: Order[];
}

// 유틸 함수 정의

function findOrderIndex(state: InitialState, action: PayloadAction<Order>) {
  return state.orders.findIndex(
    (order) => order.orderId === action.payload.orderId
  );
}

function findDeliveryIndex(state: InitialState, action: PayloadAction<Order>) {
  return state.deliveries.findIndex(
    (delivery) => delivery.orderId === action.payload.orderId
  );
}

// 리덕스 슬라이스 정의

const initialState: InitialState = {
  orders: [],
  deliveries: [],
};

const orderSlice = createSlice({
  name: "order",
  initialState,
  reducers: {
    addOrder(state, action: PayloadAction<Order>) {
      state.orders.push(action.payload);
    },
    acceptOrder(state, action) {
      const orderIndex = findOrderIndex(state, action);
      const doesOrderExist = orderIndex > -1;

      // 배달에 넣고, 주문에서는 빼기
      if (doesOrderExist) {
        state.deliveries.push(state.orders[orderIndex]);
        state.orders.splice(orderIndex, 1);
      }
    },
    rejectOrder(state, action) {
      const orderIndex = findOrderIndex(state, action);
      const doesOrderExist = orderIndex > -1;

      // 처리하지 않을 것이기 때문에, orders 에서 제거
      if (doesOrderExist) {
        state.orders.splice(orderIndex, 1);
      }

      const deliveryIndex = findDeliveryIndex(state, action);
      const doesDeliveryExist = orderIndex > -1;

      // 처리하지 않을 것이기 때문에, orders 에서 제거
      if (doesDeliveryExist) {
        state.orders.splice(deliveryIndex, 1);
      }
    },
  },
  // eslint-disable-next-line @typescript-eslint/no-unused-vars
  extraReducers(builder) {},
});

export default orderSlice;

새로운 관심사가 생겨 슬라이스를 추가하고 싶을 때

• redux_slices 아래에 관심사.ts 를 생성하고 내용을 작성한다.
• redux_store 에서 reducer.ts 를 편집하여, 새로 생성된 슬라이스를 추가해준다.

레퍼런스

제로초 배달앱 클론코딩 [with React Native]