Redux(리덕스)란?

리덕스는 React 에서 가장 많이 사용되고 있는 상태관리 라이브러리 중 하나다

자바스크립트 라이브러리기 때문에 리액트 뿐만이 아니라 다른 언어에서도 사용 가능하다

기본 개념

Single Source of Truth

• 스토어라는 하나의 저장소에서 데이터를 가져온다

State is Read-Only

• state를 직접 변경하지 않고 action 객체를 통해 상태를 변경한다

Changes are made with Pure Functions

• 리듀서는 순수함수로 만들어져야 한다
• 액션객체를 통해 리듀서를 수행한 후 상태 값이 변경된다

설치

• 리덕스는 자바스크립트 라이브러리이므로, 타입스크립트 프로젝트에서 사용하기 위해 @types/react-redux 추가 설치 필요

npm i react-redux @types/react-redux

Redux Toolkit

리덕스 툴킷은 기존 리덕스의 보일러 플레이트 코드를 줄이고, 좀 더 효율적인 개발을 할 수 있도록 도와주는 유틸리티이다

설치

npm i @reduxjs/tookit

사용법

Provider

• 기존 store에 Provider 컴포넌트로 감싸주는 것은 동일하다
• react-redux에서 Provider를 통해 리액트앱에 store를 손쉽게 연동 할 수 있게 도와준다

// index.tsx
import { Provider } from "react-redux";
import { store } from "./store";

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

configureStore

• configureStore 함수는 기존 리덕스 라이브러리의 createStore 함수를 추상화한 것으로, 기존의 번거로웠던 리덕스 설정을 간편하게 도와준다
  • reducer : 리덕스 스토어의 rootReducer를 설정
  • middleware : redux-logger와 같은 리덕스 미들웨어를 설정
  • devTools : Redux DevTools 사용 여부 설정 (기본값은 true)
  • preloadedState : 리덕스 스토어의 초기값 설정
  • enhancers : 사용자 정의 미들웨어를 설정

import { configureStore } from "@reduxjs/toolkit";
import userReducer from "./userSlice";

export const store = configureStore({
  reducer: userReducer,
  middleware: (getDefaultMiddleware) => getDefaultMiddleware().concat(logger),
  devTools: process.env.NODE_ENV !== 'production',
  preloadedState: initialState,
  enhancers: (defaultEnhancers) => [...defaultEnhancers]
});

export type AppDispatch = typeof store.dispatch;
export type RootState = ReturnType<typeof store.getState>;

combineReducers

combineReducers 함수를 사용하여 slice reducer를 병합한 rootReducer를 설정 가능

const rootReducer = combineReducers({
  user: userReducer,
  feed: feedReducer, 
});

hooks

• 타입스크립트 프로젝트에서 useSelector 와 useDispatch를 사용하기 위해서는 별도의 hook을 만들어 타입을 정의해줘야 한다

[참조] Define Root State and Dispatch Types
https://react-redux.js.org/using-react-redux/usage-with-typescript#define-root-state-and-dispatch-types

import { TypedUseSelectorHook, useDispatch, useSelector } from 'react-redux'
import type { RootState, AppDispatch } from './store'

export const useAppDispatch: () => AppDispatch = useDispatch
export const useAppSelector: TypedUseSelectorHook<RootState> = useSelector

createSlice

• createSlice 함수는 선언한 slice의 name에 따라서 액션 생성자, 액션 타입, 리듀서를 자동으로 생성

import { createSlice } from "@reduxjs/toolkit";
import { User } from "../utils";

const initialState: { user: User | null } = {
  user: null,
};

export const userSlice = createSlice({
  name: "user",
  initialState: initialState,
  reducers: {
    login: (state, action) => {
      state.user = action.payload;
    },
    logout: (state) => {
      state.user = null;
    },
  },
});

export const { login, logout } = userSlice.actions;
export default userSlice.reducer;