• 카테고리

    질문 & 답변
  • 세부 분야

    풀스택

  • 해결 여부

    해결됨

redux thunk 원리 질문

23.07.11 23:13 작성 조회수 246

0

1.
thunk를 사용하면 함수형 action을 dispatch 했을때action을 단순히 실행하는 것으로 보이는데요.

그렇다면 아래 두 코드처럼
함수형 action을 dispatch하는 방식과
함수로 감싸지 않고 하는 방식과 결과는 같다고 생각되는데 맞나요?

const loginAction = () => {
  return (dispatch) => {
    dispatch(loginRequestAction());
    axios.post('/api/login')
      .then((res) => {
        dispatch(loginSuccessAction(res.data));
      })
      .catch((err) => {
        dispatch(loginFailureAction(err));
      })
  }
}

const onClickLogin = () => {
  dispatch(loginAction());
}
const onClickLogin = () => {
  dispatch(loginRequestAction());
  axios.post('/api/login')
    .then((res) => {
      dispatch(loginSuccessAction(res.data));
    })
    .catch((err) => {
      dispatch(loginFailureAction(err));
    })
}

2.
1이 맞다면 함수 action을 dispatch하는 방식은 편의성 때문이라고 봐도 될까요?

3.
강의 10:40 쯤에 thunk는 한번에 dispatch를 여러번 할 수 있게 해준다고 하셨는데
thunk없이 아래처럼 여러번 쓰는 것은 문제가 될 수 있나요?

// action은 임의로 지었습니다
const onClickButton = () => {
  dispatch({type: 'CHANGE_ID'});
  dispatch({type: 'CHANGE_PASSWORD'});
}

 

 

 

답변 1

답변을 작성해보세요.

1

  1. 네 동작은 같습니다.

  2. 로직의 분리때문입니다. api 요청과 비즈니스로직을 컴포넌트에서 분리하는 것이죠

  3. 별 문제 없습니다. 다만 상황에 따라 리렌더링이 두 번 될 수는 있습니다.