🐲 Redux와 TypeScript

Redux + TypeScript에 대한 포스트입니다.

🤔 Redux 사용 이유

프로젝트의 전체적인 데이터(상태)를 보다 쉽고 흐름에 맞게 관리하기 위해서 사용합니다.
React.js를 기준으로 프로젝트를 진행하다보면 컴포넌트마다 각각의 state를 이용해서 관리하기 보다는 하나의 데이터를 공유하면 편하겠다는 생각이 프로젝트가 커질수록 들게 됩니다.
물론 Redux를 사용하지 않고 React.js만으로도 가능합니다. 최상위 컴포넌트에 상태를 정의하고 props를 이용해서 하위 컴포넌트로 계속 전달하면 됩니다. 직접 경험해보시면 알게 되겠지만 가독성이 매우 안좋아지고 하나의 수정에 의한 변경해야할 코드가 정말 많아집니다.

이런 불편함을 해결하기 위해서 대부분 Redux를 사용합니다. Redux는 하나의 상태를 갖는 큰 객체를 가지고 코드가 꼬이지 않기 위해서 Flux패턴을 이용해야만 그 객체로 변경할 수 있습니다.

중간 정리를 하자면 Redux는 하나의 큰 상태를 갖는 객체인 store를 갖고 그 store를 각 컴포넌트에서 가져와서 사용하므로 props를 이용해서 데이터를 내려주는 과정이 필요없게 됩니다. 또한 React.js에서는 각 컴포넌트에서 사용하는 store를 인지하고 구독함으로써 store가 변경됨에 의해서 해당 컴포넌트는 리랜더링을 하게 됩니다. 또한 데이터의 흐름을 파악하기 위해서 Flux패턴을 이용해야만 store를 변경할 수 있으니 데이터의 신뢰성도 높아집니다.

🧐 Flux 패턴

• 주요 개념들
  1. store: 전체적인 데이터(상태)를 관리하는 하나의 큰 객체
  2. action: 상태를 변경하기 위한 type과 상태를 수정하기 위한 payload를 갖는 객체
  3. dispatch: 상태를 변경하기 위해 action를 인자로 받는 함수
  4. reducer: 상태에 대한 정의와 상태의 변경에 대한 정의를 갖는 함수

데이터가 한 방향으로만 흐르게 보장될 수 있도록 해주는 아키텍처입니다.
action을 dispatch해서 reducer로 보낸 후 정의된 처리를 완료하고 새로운 state, store를 만듭니다.

✨ 예시

Redux만을 사용한 예시입니다.

// legacy_createStore를 사용하는 이유는 Redux에서 이제는 redux-toolkit을 사용하라고 권장하기 때문
import {
  legacy_createStore as createStore,
  combineReducers,
  applyMiddleware,
} from "redux";

// type ( as const를 이용해서 불변임을 정의 )
const ADD_USER = "ADD_USER" as const;
const ADD_POST = "ADD_POST" as const;

// action ( 액션을 생성하는 함수... 직접적으로 액션을 전달해도 되지만 액션이 많아지면 헷갈려서 액션 크리에이터를 정의함 )
const addUser = () => ({ type: ADD_USER });
const addPost = (payload: number) => ({ type: ADD_POST, payload });
// 액션의 타입 ( reducer에서 사용 )
type UserAction = ReturnType<typeof addUser>;
type PostAction = ReturnType<typeof addPost>;

// reducer
// 유저 리듀서 정의
const userInitialState = {
  users: 333,
};
type UserStateType = typeof userInitialState;
const userReducer = (
  state: UserStateType = userInitialState,
  action: UserAction
): UserStateType => {
  switch (action.type) {
    case ADD_USER:
      return {
        ...state,
        users: state.users + 1,
      };

    default:
      return state;
  }
};
// 게시글 리듀서 정의
const PostInitialState = {
  posts: 5555,
};
type PostStateType = typeof PostInitialState;
const postReducer = (
  state: PostStateType = PostInitialState,
  action: PostAction
): PostStateType => {
  switch (action.type) {
    case ADD_POST:
      return {
        ...state,
        posts: state.posts + action.payload,
      };

    default:
      return state;
  }
};
// 리듀서 합침
const rootReducer = combineReducers({
  user: userReducer,
  post: postReducer,
});

// middleware ( 직접 만든 간단한 미들웨어... action이 reducer로 전달되기 전에 실행 )
const logger = (store: any) => (next: any) => (action: any) => {
  // 원하는 작업 ( action이 reducer로 전달되기 전 )
  console.log("middleware >> ", action);

  // next()를 이용해서 action이 reducer로 전달됨
  return next(action);
};

// store 생성 ( getState, subscribe, getState 등이 들어있음 )
const store = createStore(rootReducer, applyMiddleware(logger));

console.log(store.getState());
store.dispatch(addUser());
store.dispatch(addPost(1111));
console.log(store.getState());

/**
 * { user: { users: 333 }, post: { posts: 5555 } }
 * middleware >>  { type: 'ADD_USER' }
 * middleware >>  { type: 'ADD_POST', payload: 1111 }
 * { user: { users: 334 }, post: { posts: 6666 } }
 */