Redux-Thunk💡

redux thunk : 리덕스에서 비동기작업을 처리할 수 있도록 도와주는 미들웨어

기존 액션생성함수를 작성할 때에는 async, await과 같은 비동기 함수를 작성할 수 없음

에러코드

export const fetchData = async () => {
  const response = await axios.get('url')
  return {
    type: 'FETCH_DATA',
    payload: response.data
  }
}

Error: action must be plain objects. Use custom middleware for async actions

이런 문제를 해결하기위해 redux-thunk를 사용할 수 있음

🧡redux-thunk의 작동방식

export const fetchData = () => {
  return async function(dispatch, getState) {
	  const response = await axios.get('url')
	  return {
	    type: 'FETCH_DATA',
	    payload: response.data
	  }
  }
}

• 액션객체 생성함수는 직접적으로 async함수를 사용할 수 없기때문에, 액션객체를 리턴하는 async함수를 return하도록 함
• 즉, 비동기 함수를 호출하는 함수
• 인자로 dispatch와 getState를 받아 타입객체를 return하는 대신, 바로 dispath할 수 있음

🧡redux-toolkit의 slice와 redux-thunk 함께 사용하기

✨요청을 보내는 thunk함수 생성

createAsyncThunk로 액션타입을 지정하고, 비동기함수를 생성

const 함수이름 = createAsyncThunk(액션타입이름, 비동기함수);

jsonplaceholder에서 게시글 목록을 가져오는 함수를 작성하면 아래와 같음

  export const getPosts = createAsyncThunk("getPosts", async () => {
    const response = await axios.get(
      "https://jsonplaceholder.typicode.com/posts"
    );
    return response.data;
  });

• 위 thunk함수에서 return한 값은 reducer함수 내에서 action.payload로 받아서 사용할 수 있음

✨createSlice로 reducer생성

1. reducer를 생성할 때 createSlice의 reducers: 의 값은 비워주고, extraReducers를 사용한다

2. 아래 상태에 따라 state가 어떻게 변할 지 지정해주도록 함

• 요청을 보낼 때 (pending)
• 요청이 성공했을 때 (fulfilled)
• 요청이 실패했을 때 (rejected)

3. 위에서 작성한 thunk함수에서 return한 값은 action.payload 담기게 됨. 이를 활용해서 state의 값을 지정

import { createSlice, createAsyncThunk } from "@reduxjs/toolkit"
import axios from "axios"

const initialState = {
  entities: [],
  loading: false,
};

export const getPosts = createAsyncThunk("getPosts", async () => {
  const response = await axios.get(
    "https://jsonplaceholder.typicode.com/posts"
  );
  return response.data
});

export const postSlice = createSlice({
  name: "posts",
  initialState,
  reducers: {},
  extraReducers: {
    [getPosts.pending]: (state) => {
      state.loading = true
    },
    [getPosts.fulfilled]: (state, action) => {
      state.loading = false;
      state.entities = action.payload
    },
    [getPosts.rejected]: (state) => {
      state.loading = false;
    },
  },
});

export default postSlice.reducer