Intro

Flux Pattern에서 모든 것의 시작은 action이었습니다. action부터 시작해봅시다.

Action

Action이란?

Action. 새로운 반응이 생겼습니다. 무언가를 해달라는 요청이 생겼어요!
어떤 반응인지를 정의하는 type 필드를 포함하여 필요하면 데이터까지 같이 담아 보냅니다.

type과 action creator

type은 해당 state명/type명으로 정의합니다. store안에 state가 여러 개 있으므로 어디 소속인지 명확하게 밝히고 이 긴 이름을 매번 쓰기 힘드므로 변수로 지정합니다.

action creator는 action의 정체가 결국 객체이므로 해당 type을 가지고 있는 객체로 만들어주기 위함입니다.

즉, 이 두 과정은 action을 만드는 과정입니다.

// type
export const INCREASE = 'counter/INCREASE' as const;
export const INCREASE_BY = 'counter/INCREASE_BY' as const;

// action creator
export const increase = () => ({ type: INCREASE });
export const increaseBy = (diff: number) => ({
  type: INCREASE_BY,
  payload: diff
});

액션 객체들에 대한 type 설정
리듀서에서 작성할 action 타입을 설정하기 위해서. 우리가 만든 액션들의 typescript type을 준비합니다.

export type Actions = 
  | ReturnType<typeof increase>
  | ReturnType<typeof increaseBy>;

typesafe-actions로 리팩토링

1) redux-actions

import { createAction } from 'redux-actions';
export const increase = createAction(INCREASE);
export const increaseBy = createAction(INCREASE_BY);

2) typesafe-actions
type에서 as const 삭제

import { createStandardAction, ActionType } from 'typesafe-actions';
export const increase = createStandardAction(INCREASE)();
// () => ({ type: INCREASE })
export const increaseBy = createStandardAction(INCREASE_BY)<number>();
// (payload: number) => ({type: INCREASE_BY, payload })

export type Actions =
  | ActionType<typeof increase>;
  | ActionType<typeof increaseBy>;

2-1) 비동기 action

import { createAsyncAction } from 'typesafe-actions';
const fetchUsersAsync = createAsyncAction(
  'FETCH_USERS_REQUEST',
  'FETCH_USERS_SUCCESS',
  'FETCH_USERS_FAILURE',
)<string, User[], Error>();