정중식의 개발공부로그

react-thunk에서 history가 안먹혔다.

25 Jun 2021 | memo

history가 안먹혔다.

액션함수 인자값으로, history를 넘겨 history.goBack()을 사용하여 이전페이지로 이동하려고했으나 먹히지가 않았다.
console.log로 확인 결과 history가 undefined이 뜨는걸 확인할 수 있었다.

찾아가는 과정

  1. 인자 값으로 history 하나만 넘겨서 콘솔 찍어본 결과 잘 먹히는걸 볼 수 있었다.
  2. 인자 값으로 두개 이상 값을 보내면 어림없죠 undefined 바로 출력.

    ex)) 
    onClick={() => onRemove( history, id )} // 이런식으로 넘겨주면 언디파인뜸
  3. 대괄호로 묶어줘서 콘솔찍어보니 잘 먹음

onClick={() => onRemove({ history, id })} // 이런식으로 사용,

// thunk 정의함수.. 
export const removeReview =
  ({ history, id }) =>
  async (dispatch) => {
    try {
      await axios.delete(`/api/reviews/delete?id=${id}`);

      alert('상품 삭제 완료');

      history.goBack();
    } catch (err) {
      console.error(err);
      if (err.response) {
        const errors = err.response.data.msg;

        if (errors) {
          alert(errors);
        }
      }
      dispatch({
        type: REVIEW_POST_FAILURE,
        payload: { msg: err },
      });
    }
  };

그동안 history가 어떤건 적용이되고, 어떤건 에러가 뜨는 이유가 궁금했었는데 이번 기회를 통해 제대로 짚고 넘어갈 수 있어서 좋았다.

Related Posts