김민태의 데브캠프 2기 - Redux Thunk

 

정의 : 리덕스 미들웨어중 하나로, thunk(일부 지연된 작업을 수행하는 코드 조각)

 

지금 일부 논리(logic)을 실행하는 대신, 나중에 작업을 수행하는데 사용할 수 있는 함수 본문이나 코드 작성 가능

 

let x = 1 + 2 

let foo = () => 1 + 2 //Thunk

 

그다음, 아래 코드처럼 작성하여 API의 데이터를 받을 준비를 하고

enum ActionType {
    FETCH_POSTS = 'FETCH_POSTS' // FETCH_POSTS 추가
} 

const posts = (state: Post[] = [], action: Action): Post[] => {
    switch (action.type) {
        case ActionType.FETCH_POSTS:
            return [...state, ...action.payload]; // payload로 포스트 추가
        default:
            return state;
    }
};

 

아래의 코드로 API 요청을 보내고 실행해보면.. 

    const dispatch = useDispatch();

    useEffect(() => { //오류 발생
      dispatch(fetchPosts())
    },[dispatch])

    const fetchPosts = () :any => {
      return async function fetchPostsThunk(dispatch:any, getState: any){
        const response = await axios.get("https://jsonplaceholder.typicode.com/posts");
        dispatch({type: "FETCH_POSTS", payload: response.data})
      }
    }

 

 

무수히 많은 에러가 나를 감싼다...

 

에러가 나는 이유?

 

원래 Action은 객체여야하는데 현재 그 함수를 Dispatch하고 있다.

    useEffect(() => { //오류 발생
      dispatch(fetchPosts())
    },[dispatch])

따라서 함수를 DIspatch해주는 Redux-Thunk 미들웨어를 설치해서 이를 해결해보고자 한다.

 

 

npm install redux-thunk --save를 실행하고 이를 추가해주면 

const middleware = applyMiddleware(thunk, loggerMiddleware)

 

관련 알고리즘은 다음과 같다.

 

함수인 경우에 처리가 redux-thunk가 하는 일이다.