Intro

action이 발생하여 dispatch가 되면 그 다음은 reducer가 실행되겠죠. dispatch는 UI와 연결하여 실행되어야 하니 먼저 reducer를 작성해 봅시다.

Init state

리듀서는 초기 state값과 action을 받아서 새로운 state를 반환하므로, 먼저 init state를 작성합니다.

type CounterState = {
  count: number;
}

const initialState: CounterState = {
  count: 0
}

reducer 작성

export function counter(state: CounterState = initialState, action: CounterAction) {
  switch (action.type) {
    case INCREASE:
      return { count: state.count + 1 };
    case INCREASE_BY:
      return { count: state.count + action.payload };
    default:
      return state;
  }
}

여기서의 CounterAction 타입은 Action시간에 만든 action 객체들에 대한 타입입니다.