thunk 미들웨어 잡업 중 논리로직 단계? 질문이 있습니다.

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

리덕스에 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
라고 하신거 같은데요.
이걸 보고 나름 이해하려고 노력했는데...

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

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

네, 질문 자체가 이해가 잘 안 되긴 합니다.

미들웨어는 이미 리덕스 안에 등록되어 있는 것이고요. 현재 login은 비동기 액션 함수이고 비동기 액션 함수의 리턴값은 typeof action === 'function'입니다. 동기 액션 함수의 리턴값은 typeof action === 'object'입니다. 그래서 thunkMiddleware에서 비동기 액션 함수인 경우에는 if문 내부가 실행되는 겁니다. 비동기 액션 함수의 리턴값은 (dispatch, getState)를 매개변수로 받으니 action(store.dispatch, store.getState)로 호출하는 것이고요.

지금은 비동기로 만든 액션함수가 하나니까 미들웨어에서 하나로 매칭될 수 있겠는데..?
여러개면 어떻게 되는거지라는? 의문입니다.

라고 하셨는데 비동기 액션함수가 여러개여도 어차피 한번에 하나씩 thunkMiddleware에서 실행되므로 아무 상관이 없습니다.

인프런 커뮤니티 질문&답변