Cộng đồng Hỏi & Đáp của Inflearn

미들웨어가 들어간 이후 궁금한 부분이 있어서 질문 합니다.

리덕스에 dispatch를 하면 리듀서가 이를 받고, 기존에 액션함수를 만들었다면, 만든 액션함수를 매칭 시켜서 상태관리를 하잖아요?

그래서 이번 강좌(2-4.redux-thunk)에서도 비동기 로그인을 디스패치 하잖아요?

store.dispatch(
  logIn({
    id: 1,
    name: "goodsosbva",
    admin: true,
  })

이 이후에 액션에 정의한

// async action creator
const logIn = (data) => {
  return (dispatch, getState) => {
    // async action
    dispatch(logInRequest());

    try {
      setTimeout(() => {
        dispatch(
          logInSuccess({
            userId: 1,
            nickname: "khszzang!",
          })
        );
      }, 2000);
    } catch (e) {
      dispatch(logInFailure(e));
    }
  };
};

여기로 가서 로직을 하잖아요?

이때, 만들어둔 미들웨어가

const thunkMiddleware = (store) => (next) => (action) => {
  if (typeof action === "function") {
    // 비동기
    return action(store.dispatch, store.getState);
  }
  return next(action);
};

const enhancer = applyMiddleware(firstMiddleware, thunkMiddleware);

const store = createStore(reducer, initialState, enhancer);

어떤 순간에 작동하는지가 감이 안와서 질문드립니다.
이전 강의에서는
dispatch -> 미들웨어 -> reducer
라고 하신거 같은데요.
이걸 보고 나름 이해하려고 노력했는데...

걸리는 점은
지금은 비동기로 만든 액션함수가 하나니까 미들웨어에서 하나로 매칭될 수 있겠는데..?
여러개면 어떻게 되는거지라는? 의문입니다.
제질문이 좀 난해한거같기도 한데요.

요약하면, 미들웨어가 어디서 동작하는지 모르겠다.
비동기 미들웨어 요청을 할때 액션함수를 알맞게 어떻게 요청하는지 몰라서 질문드립니다.