Redux - 사용법

1. 리액트 리덕스 설치

npm install redux react-redux

 

2. Provider로 감싸기

 

[ src/main.tsx ]

import React from "react";
import ReactDOM from "react-dom/client";
import App from "./App";

import { legacy_createStore } from "redux";
import { Provider } from "react-redux";
import rootReducer from "./redux/rootReducer";

const store = legacy_createStore(rootReducer);

ReactDOM.createRoot(document.getElementById("root") as HTMLElement).render(
  <Provider store={store}>
    <React.StrictMode>
      <App />
    </React.StrictMode>
  </Provider>
);

 

리덕스를 사용하기 위해서는 ReactDOM.render 부분에서 Provider 태그로 감싸줘야 한다. 또한 리덕스의 createStore 객체를 사용하여 리액트 앱에서 사용할 리덕스 스토어를 생성해줘야 한다. 상태 관리 스토어는 한 개만 사용하도록 권장된다.

 

리덕스의 최신버전에서는 createStore을 사용하면 취소선이 그어지는데 그대로 써도 작동은 한다고 한다. 공식 문서에서는 'Redux Tooolkit'을 권장하고 있고, legacy_createStore를 사용하면 취소선이 사라진다.

 

3. Reducer 생성

 

[ src/modules/Team.ts ]

//액션
const SET_TEAM_ID = "team/SET_TEAM_ID";

//액션 생성 함수
export const setTeamId = () => ({ type: SET_TEAM_ID, teamId });

//초기값
const initialState = {
  teamId: 0,
};

export default function teamId(state = initialState, action) {
  switch (action.type) {
    case SET_TEAM_ID:
      return {
        ...state,
        name: action.teamId,
      };
    default:
      return state;
  }
}

 

[ src/modules/Room.ts ]

//액션
const SET_ROOM_ID = "room/SET_ROOM_ID";

//액션 생성 함수
export const setRoomId = () => ({ type: SET_ROOM_ID, roomId });

//초기값
const initialState = {
  teamId: 0,
};

export default function roomId(state = initialState, action) {
  switch (action.type) {
    case SET_ROOM_ID:
      return {
        ...state,
        name: action.roomId,
      };
    default:
      return state;
  }
}

 

Provider를 감싼 후, 리덕스 스토어를 생성해주기 위해 리듀서를 생성해줘야 한다. 리듀서는 데이터를 찾아 수정해주는 함수이다. 리듀서를 사용할 때는 모듈 폴더를 하나 만든 후, 해당 폴더 안에 기능별로 파일을 생성하여 사용한다.

 

4. combinereducer로 Reducer 함수 통합

 

[ src/modules/index.ts ]

import { combineReducers } from "redux";
import Room from "./Room";
import Team from "./Team";

const rootReducer = combineReducers({ Room, Team });

export default rootReducer;

 

리덕스 스토어의 상태는 단일 객체로 유지해야 하지만, 유지 보수를 위해서는 리듀서를 작은 단위로 분리하는 것이 효율적이다. 이 때,  'combineReducers'를 사용하여 모듈을 하나로 통합해준다. combineReducers는 리덕스에서 여러 개의 리듀서를 하나로 합치는 함수이다. 

 

5. 컴포넌트에서 Redux 사용

 

[ src/screens/Team/Team/tsx ]

 

리덕스의 상태와 액션을 사용하기 위해 'connect' 함수를 사용하는 방법도 있지만, Hook이 등장하면서 API인 useSelector와 useDispatch가 있기 때문에 사용할 일이 별로 없어졌다. 리액트 컴포넌트를 만들 때 클래스형 컴포넌트로 작성한 경우라면 Hooks를 사용하지 못해서 connect 함수를 사용해야 하지만, 리액트에서는 꼭 필요할 때에만 클래스형 컴포넌트로 작성을 하기 때문이다. 그러나 2019년 이전의 리덕스와 연동된 컴포넌트들은 connect 함수로 작성되어 있기에 connect 함수의 기능은 알아둬야 한다. connect 함수를 사용하기 위해서는 mapStateToProps와 mapDispatchToProps 두 가지 함수를 사용해주어야 한다.

 

• mapStateToProps
  리덕스 store에 있는 state(데이터)를 props 형태로 컴포넌트에 넣어주는 함수
• mapDispatchToProps
  Dispatch를 넘겨주는 함수

connect 함수는 두 개의 함수를 인자로 받아 리덕스의 Provider 컴포넌트에서 제공되는 스토어에 연결된 새로운 컴포넌트를 반환한다. 이 새로운 컴포넌트는 변경 사항이 발생할 때마다 자동으로 컴포넌트를 업데이트 한다. 액션을 디스패치하여 상태를 업데이트해야 한다.

 

useSelector는 mapStateToProps, useDispatch는 mapDispatchToProps의 대체이다. 컴포넌트를 사용 할 때 props 사용 대신, useSelector와 useDispatch로 이루어진 커스텀 Hook을 만들어서 사용한다.