Redux Thunk

JunpyoAhn·2023년 12월 14일
0
post-thumbnail

1. 미들웨어란?

<액션> -> <미들웨어> -> <리듀서> -> <스토어>

리덕스에서 dispatch를 하면 action 이 리듀서로 전달이 되고, 리듀서는 새로운 state를 반환한다. 그 과정 중간에 미들웨어를 우리가 컨트롤 할 수 있다면 우리가 하고 싶은 작업을 할 수 있게 된다.

미들웨어를 컨트롤 하는 이유

우리가 서버를 통신할 때 비동기 적으로 하기 위해서!

그럼 thunk란 무엇인가?

thunk를 사용하게 되면 객체가 아닌 함수를 dispatch를 할 수 있다.

dispatch(함수) → 함수실행 → 함수안에서 dispatch(객체)

Thunk를 사용하는 방법

리덕스 툴킷에서는 createAsyncThunk 라는 API를 사용해서 Thunk 함수를 생성할 수 있다.
첫번째 createAsyncThunk의 첫번째 인자에는 Action Value, 두번째인자에는 함수가 들어간다.
이 함수 안에서 우리가 하고 싶은 작업을 진행하면 된다.

사용예)
// 가 함수 이름에 붙은 이유는 이 함수가 thunk 함수라는 것을 표시하기 위함(주어진 법칙은 아니다)
export const
addNumber = createAsyncThunk("ADD_NUMBER_WAIT",(arg,thunkAPI)=>{},
);

0개의 댓글