February 6, 2022 https://www.youtube.com/watch?v=udr2rx_B99w

yarn add redux react-redux react-thunk @types/react-redux

yarn add redux-thunk @types/redux-thunk

bankReducer.ts

type Action = { // action의 타입을 정의한다
  type: string;
  payload?: number;
};

const reducer = (state: number = initialState, action: Action) => {

const initialState = 0;

interface DepositAction {
  type: "deposit";
  payload: number;
}

interface WithdrawAction {
  type: "withdraw";
  payload: number;
}

interface BankruptAction {
  type: "bankrupt";
	// 파산은 payload가 없다
}

// 타입을 case 별로 정리함
type Action = DepositAction | WithdrawAction | BankruptAction;

const reducer = (state: number = initialState, action: Action) => {
  switch (action.type) {
    case "deposit":
      return state + action.payload;
    case "withdraw":
      return state - action.payload;
    case "bankrupt":
      return 0;
    default:
      return state;
  }
};

export default reducer;

// 휴먼 에러를 줄이기 위해 enum 생성 (상수화)
export enum ActionType {
  DEPOSIT = "deposit",
  WITHDRAW = "withdraw",
  BANKRUPT = "bankrupt",
}

reducers

import { combineReducers } from "redux";
import bankReducer from "./bankReducer";

const reducers = combineReducers({
  bank: bankReducer,
});

export default reducers;

action-creators

import { Action } from "./../actions/index";
import { ActionType } from "./../action-types/index";
import { Dispatch } from "redux";

export const depositMoney = (amount: number) => {
  // compiler가 Dispatch를 정확히 모르기 때문에 Action 타입을 지정해준다
  return (dispatch: Dispatch<Action>) => {
    dispatch({
      type: ActionType.DEPOSIT,
      payload: amount,
    });
  };
};

store

import { applyMiddleware, createStore } from "redux";
import reducers from "./reducers";
import thunk from "redux-thunk";

export const store = createStore(reducers, {}, applyMiddleware(thunk));

App