typesafe-actions 라이브러리

npm install typesafe-actions

import { ActionType, createReducer, deprecated } from "typesafe-actions";
const { createStandardAction } = deprecated;

action 생성함수

1️⃣ 파라미터와 payload값의 형태가 같을 때
	createStandardAction(action 타입)<payload 타입>()
2️⃣ 파라미터와 payload값의 형태가 다를 때
	createAction(action 타입, action=>(파라미터의 이름:타입)=>
            action(payload 값)

로 작성한다.

1️⃣
const toggleTodo=(id:number)=>({
	type:TOGGLE_TODO,
    payload: id
})
export const increase=()=>({type: INCREASE})
export const decrease=()=>({type: DECREASE})
2️⃣
const addTodo=(text:string)=>({
	type:ADD_TODO,
    payload: {id:nextid, text:text}
})

1️⃣
const toggleTodo= createStandardAction(TOGGLETODO)<number>()
export const increase=createStandardAction(INCREASE)();
export const decrease=createStandardAction(DECREASE)();
2️⃣
const addTodo= createAction(ADD_TODO, action=>(text:string)=>
            action({id:nextid, text:text})
)

리듀서

1️⃣
createReducer<상태타입, 액션타입>(초기상태값, {
  [액션타입1]:(state,action)=> return값,
  [액션타입2]:state=> return값, // 받아오는 action이 없을 경우
});
또는
2️⃣
createReducer<상태타입, 액션타입>(초기상태값)
  .handleAction(액션생성함수1,state=>(return값)
  .handleAction(액션생성함수2,state=>(return값)

로 작성한다.

type TodoAction= ReturnType<typeof addTodo> 
               | ReturnType<typeof removeTodo>
               | ReturnType<typeof toggleTodo>

function todos(state:TodoState=initialState,action:TodoAction){
  switch (action.type) {
    case ADD_TODO:
      return [
		...state,
		{id:action.payload.id,
		text:action.payload.text,
		isDone:false}
	  ]
	case REMOVE_TODO:
	  return state.map(todo=>todo.id===action.payload?
                       {...todo,isDone:!todo.isDone}:todo)
	case TOGGLE_TODO:
	  return state.filter(todo=>todo.id!==action.payload);
	default:
	  return state;
	}
}

아래는 1의 예시이다.

export type Todo= {
		id:number,
		text:string,
		isDone:boolean
	}
export type TodoState= Todo[];

const todos= createReducer<TodoState,TodoAction>(initialState,{
		[ADD_TODO]:(state,action)=>[...state,{...action.payload, isDone:false}],
		[TOGGLE_TODO]:(state,{payload:id} )=>state.map(todo=>todo.id===id?
                     {...todo,isDone:!todo.isDone}:todo),
		[REMOVE_TODO]:(state,{payload:id})=>state.filter(todo=>todo.id!==id )
})

createAsyncAction() 함수

비동기 액션을 생성시켜주는 함수

const getUserAsync= createAsyncAction(
	액션타입1, 액션타입2, 액션타입3
)<undefinde,>();

export const getUserProfilere= createStandardAction(GET_USER_PROFIE)<boolean>();
export const getUserProfileSuccess=createStandardAction(GET_USER_PROFIE_SUCCESS)<GithubProfile>();
// export const getUserProfileSuccess=(data:GithubProfile)=>({type:GET_USER_PROFIE_SUCCESS, payload:data});
export const getUserProfileError=createStandardAction(GET_USER_PROFIE_ERROR)<AxiosError>();


const actions= {getUserProfilere,getUserProfileSuccess,getUserProfileError};
type GithubAction= ActionType<typeof actions>

를 아래와 같이 작성 할 수 있다.

export const getUserAsync= createAsyncAction(
	GET_USER_PROFIE,GET_USER_PROFIE_SUCCESS,GET_USER_PROFIE_ERROR
)<undefined,GithubProfile,AxiosError>();


type GithubAction= ActionType<typeof getUserAsync>