[TIL] 240219(월) 리덕스 미들웨어 Redux-Thunk

리덕스 미들웨어 (Redux Middleware) 란?

리덕스에서 dispatch를 하면 action이 reducer로 type과 payload를 가지고 전달이 되고, 새로운 state를 반환한다.
하지만 middleware를 사용한다면, 이 과정 사이에서 하고 싶은 작업을 넣을 수 있다!

리덕스 미들웨어를 사용하는 이유는?

서버와 통신을 위해서 사용. 그 중에서도 가장 많이 사용되고 있는 리덕스 미들웨어가 redux-thunk이다.

Thunk란 무엇인가?

리덕스에서 가장 많이 사용하고 있는 미들웨어 중 하나.
thunk를 사용하면, 객체가 아닌 함수를 dispatch 할 수 있게 해준다.

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

리덕스 미들웨어 사용하기

: 액션이 리듀서로 전달되기 전에 중간에 어떤 작업을 더 할 수 있다.

1. thunk 함수를 만들기 : createAsyncThunk

   : reduxToolkit 내장 API

2. createSlice > extraReducer 에 thunk 등록

3. dispatch

4. test

export const __addNumber = createAsyncThunk(
    "ADD_NUMBER_WAIT",
    (arg, thunkAPI)=>{},
);

🚨 함수 이름 앞에 __ 를 붙이면 thunk 함수 라는 것을 나타낸다.

• 첫 번째 인자(arg) : thunk 함수가 외부에서 사용되었을 때 넣은 값을 조회할 수 있다.
• 두 번째 인자(thunkAPI) : thunk가 제공하는 여러가지 API 기능들이 담긴 객체를 꺼낼 수 있다.

ex)

export const __addNumber = createAsyncThunk(
    // 첫번째 인자 : action value
  "addNumber", 
    // 두번째 인자 : 콜백 함수 
  (payload, thunkAPI) => {
    setTimeout(() => {
      thunkAPI.dispatch(addNumber(payload));
    }, 3000);
  }
);

함수 외부에서 넣은 payload 값을 사용하, 두 번째 인자로 thunkAPI 기능 중 setTimeout 함수를 사용하여 기능을 구현한다.

Thunk에서 promise 다루기

1. thunk 함수를 구현
   : ex) __getTodos()

2. 리듀서 로직 구현
   : reducer → extraReducers 사용

• 서버와의 통신은 100% 성공하지 않는다. 서버와 통신에 실패해도 서비스가 어떻게 동작할지를 구현해야한다!
• 지금까지의 redux state(todos, counter)
• 앞으로의 state(isLoading, isError, data)

3. 기능 확인(network) + devTools
4. Store의 값을 조회 + 화면에 렌더링