React - Thunk

Redux Thunk란?

• 리덕스에서 많이 사용하고 있는 미들웨어 중 하나이다.
• 미들웨어 : 리덕스에서 dispatch를 하면 action이 리듀서로 전달 되고, 리듀서는 새로운 state를 반환한다. 미들웨어를 사용하면 이 과정 사이에 우리가 하고 싶은 작업들을 넣어서 할 수 있다.
• Thunk를 사용하면 우리가 dispatch를 할 때 객체가 아닌 함수를 dispatch 할 수 있다.

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

thunk 함수 구현하기

3초를 기다리는 thunk 함수를 구현해보자.
툴킷에선 createAsyncThunk 라는 API를 사용해 thunk 함수를 생성할 수 있다.

export const __addNumber = createAsyncThunk(
	// 첫번째 인자 : action value
    "addNumber"
    // 두번째 인자 : 콜백함수
    (payload, thunkAPI)=>{
    	setTimeout(()=>{
        	thunkAPI.dispatch(addNumber(payload));
            }, 3000);
    }
);
const counterSlice = createSlice({
    name: "counter",
    initialState,
    reducers: {
      addNumber: (state, action) => {
        state.number = state.number + action.payload;
      },

      minusNumber: (state, action) => {
        state.number = state.number - action.payload;
      },
    },
});

• 전에는 addNumber라는 action creator를 dispatch 했다면, 이제는 __addNumber라는 thunk 함수를 dispatch 해준다.

// App.jsx
...
const onClickAddNumberHandler = () => {
	dispatch(__addNumber(number));
};
...