😨😱😰 액션생산자가 뜬금없이 함수를 리턴하면?

그것은 썽크!
Redux-thunk!

왜 갑자기 액션생산자가 함수를 리턴? (띠용)

  const handleClick = (item) => {
    if (!cartItems.map((el) => el.itemId).includes(item.id)) {
      dispatch(addToCart(item.id));
      dispatch(notify(`장바구니에 ${item.name}이(가) 추가되었습니다.`));
      // notify(`장바구니에 ${item.name}이(가) 추가되었습니다.`)(dispatch);
    } else {
      dispatch(notify("이미 추가된 상품입니다."));
    }
  };

//[액션생산자]
export const notify = function (message, dismissTime = 5000) {
  return function (dispatch) {
    const uuid = Math.random();
    dispatch(enqueueNotification(message, dismissTime, uuid));
    setTimeout(() => {
      dispatch(dequeueNotification());
    }, dismissTime);
  };
};

코드를 잘 살펴보면, dispatch(notify(장바구니에 ${item.name}이(가) 추가되었습니다.)) 이런 식으로 코드가 작성된 것을 볼 수 있습니다.
리덕스를 처음 공부하던 제 입장에서는 notify(장바구니에 ${item.name}이(가) 추가되었습니다.) << 이 부분이 리턴하는 건 '타입' 속성을 갖는 객체도 아니고 그냥 함수인데 디스패치를 해서 뭘 어쩌겠다는 걸까... 싶었습니다...

헬프데스크에 찾아보니!
아니나 다를까 똑같은 질문을 하신 분이 계셨고,
그에 대한 답변은...!

notify 함수는 그 자체가 액션이 되어 바로 리듀서에 전달되지 않고
그 안에서 enqueueNotification과 dequeueNotification이라는 각각의 액션을
인자로 받아온 dispatch함수를 이용해 동기적으로 리듀서에 전달해줍니다.

그래서 thunk에 대해 좀 더 공부해보기로 하였습니다.

비동기 액-숀 컨트롤!

리덕스에서 액션 생산자가 함수를 반환하면, Redux 썽크 미들웨어가 출동해서 실행함!
(그리고, 이 함수는 동기 액션을 보낸다!)

아래는 Redux-thunk 소-스 코드 🙌 💖
(14줄 밖에 안되는 마법의 코드)

function createThunkMiddleware(extraArgument) {
  return ({ dispatch, getState }) => (next) => (action) => {
    if (typeof action === 'function') {
      return action(dispatch, getState, extraArgument);
    }

    return next(action);
  };
}

const thunk = createThunkMiddleware();
thunk.withExtraArgument = createThunkMiddleware;

export default thunk;

이 코드를 살펴보면 리덕스의 원리를 조금 더 잘 이해할 수 있을 듯 싶다...
사실 맨위에 두 줄은 썩 잘 이해가 안 가고...
밑에 부분을 보면...

이프! 액숀이 함수면!

-> 디스패치랑, 겟스테이트랑, 엑스트라아규먼트를 액숀에 담아서 리턴하고

아니면!

-> 리듀서로 액션을 보낸다?

이걸 위 코드에서 생각해보자!

<가정> 버튼을 눌러서 'handleClick' 함수가 실행되었고, 장바구니에 마침 추가한 애가 없어서, 첫번째 이프문이 실행되었다.

1) dispatch(notify('장바구니에 ${item.name}이(가) 추가되었습니다.')) 얘가 실행됨
2) notify 함수가 리턴하는 것은 펑션임! (아래와 같은 함수!)

function (dispatch) {
    const uuid = Math.random();
    dispatch(enqueueNotification(message, dismissTime, uuid));
    setTimeout(() => {
      dispatch(dequeueNotification());
    }, dismissTime);
  };

3) 디스패치에 담긴게 객체가 아니고 펑션이니까...
4) thunk에서 notify에 dispatch 인자를 넣어서 실행한다!
5) 인큐노티와 디큐노티가 각각 액션객체를 생성해서 디스패치한다!

사실 4번 부분이 썩 잘 이해는 안 가지만...
아무튼 이런 식으로 리덕스가 비동기처리를 한다는 것을 알고 간다는 데에 일단 의의를 두기로...

사실 내가 아직도 이해가 안가는 건...

저렇게 할 거면 걍 애초에

  const handleClick = (item) => {
    if (!cartItems.map((el) => el.itemId).includes(item.id)) {
      dispatch(addToCart(item.id));
      notify(`장바구니에 ${item.name}이(가) 추가되었습니다.`)(dispatch); // ✨✨
    } else {
      dispatch(notify("이미 추가된 상품입니다."));
    }
  };

✨✨ 표시한 부분처럼 작성하면 되는 거 아닌가 싶은 건데...
모르겟으니, 고수개발자님들께 질문을 남겨놓고 포스팅은 마무리한다...