npm install typesafe-actions
import { ActionType, createReducer, deprecated } from "typesafe-actions";
const { createStandardAction } = deprecated;
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 )
})
비동기 액션을 생성시켜주는 함수
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>