react redux 기초4(applyMiddleware, thunk)

applyMiddleware는 redux에서 dispatch할 때, 값이 reducer에 전달되기 전, 그 사이에 API 호출할 수 있게 해주는 미들웨어라고 한다.

로깅, 충돌보고, 비동기 API 통신, 라우팅 등을 할 때 쓰는거라는데

안쓰면 어찌되는지 확인할 능력이 아직 없다

그래서 어찌 쓰느냐

 

import { applyMiddleware } from 'redux';

리덕스에서 applyMiddleware 데려오면 미들웨어를 쓸 수 있다.

 

여기서 예제하나 돌려보자

const loggerMiddleware = (store: any) => (next: any) => (action: any) => {

  console.log("store", store);

  console.log("action", action);

  next(action);

}

const middleware = applyMiddleware(loggerMiddleware);

const store = createStore<any, any>(rootReducer, middleware);

스토어 생성할 때 middleware 만든거 넣어주면 된다.

loggerMiddleware 코드는 구글에서 주울 수 있다.

아무튼 이렇게 하면 store랑 action에 현재 뭐 있는지 알 수 있다.

store는 왜 보는지 지금은 모르겠는데 action안에 내가 저장한거 가져온거 잘 있어서 쓸만한듯

 

2번쨰는 thunk이다

thunk는 리덕스에서 비동기 작업할때 쓰는 방법이란다

일단 redux-thunk 설치해서 thunk 가져온다

import { thunk } from 'redux-thunk';

middleware에 thunk도 넣어준다

const middleware = applyMiddleware(thunk, loggerMiddleware);

그럼 아무튼 store만들 때 thunk도 들어간거임

아무튼 미들웨어인거 같음 thunk라는것도

 

아무튼 useEffect 이용해서 비동기 처리하면 되는데

  useEffect(() => {

    dispatch(fetchPosts())

  }, [dispatch]);

export const fetchPosts = (): any => async(dispatch: any, getState: any) => {

  const response = await axios.get("https://jsonplaceholder.typicode.com/posts");

  dispatch({ type: "FETCH_POSTS", payload: response.data });

}

그냥 thunk없이도 구현하는데 문제도 없고, 성능에도 문제 없다고한다.

근데 thunk를 안쓰면, 코드가 길어지고 이해하기 어려워지는 느낌적인 느낌느낌이다

그냥 비동기 요청 날릴때는 쓰는 것으로 해보자

나중에 공부를 더 하게되면 이유도 알게되고, 골라잡아쓰는 쌉고수가 될것이다.