[문제] dispatch후 navigate해야 하는데 먼저 되는 현상: thunk시도

문제가 된 코드 

https://github.com/wav-blue/gleanbanana/blob/master/front/src/components/pages/cart/CartsButton.jsx

 

const onClickPurchase = async () => {
    if (checkedList.length === 0) return alert("선택된 제품이 없습니다.");

    dispatch(purchaseActions.storeToPurchase(checkedList));
    console.log(checkedList);
    navigate("/purchase");
  };

 

 

문제점 : 

onClick Purchase를 누르면 purchase 리스트에 checkedLIst가 추가되게 되고, 
purchase로 가야하는데, 
바로 navigate를 진행하다보니 
컴포넌트가 언마운트 되고, 

그 언마운트 된 시점에서는 dispatch가 수행되지 않아서 
제대로 storeToPurchase가 되지 않는 문제가 발생 

그렇기 때문에 
리덕스 수행을 할 때까지 기다리고 navigate를 해야 정상적으로 리덕스 상태가 업데이트 되게되고, 
해당 리덕스가 관리하고 있는 store를 바라보고 있는 (구독하고 있는)
컴포넌트가 정상적으로 업데이트 되므로, 
문제가 발생하지 않는다.

 

 

시도해 본 것 : 

 

프로젝트를 수정하기에 앞서서 간단한 예제를 만들어서 사용해 보았다. 

서버는 간단히 db연결하지 않고 

파일에 json으로 저장, 불러오기만 가능하게 직접 만들어서 보내주었다.

https://github.com/codingjamee/thunk-test_back

 

1. thunk 활용

 

thunk활용 깃 커밋내역 

Feat: thunk를 활용해 api통신 해보기 · codingjamee/thunk-test_front@152548f

 

 

Feat: thunk를 활용해 api통신 해보기

 

1. /with-thunk-list fetch를 createAsyncThunk로 구현
fulfilled상태가 되면 extraReducers에서 상태값을 받아와 todos state에 추가
fetchTodo라는 createAsyncThunk를 만듦.
WithAxiosThunk파일에서 dispatch할 때 trigger를 넘겨줌.
현재 구현되지 않고 있음

내가 생각할 때 문제점 :
createAsyncThunk에는 세가지 인수를 받는데,
두번째 인수인 payloadCreator 콜백에서 첫번째 인수에 trigger를 넣어주었으나,
보낼때는 타입을 잘 받고 있지만, 받을 때는 타입을 잘 받지 못하고 있는 것 같다.

todo.js에서 hook을 가져와보려고 하였으나, 컴포넌트가 아니므로 호출할 수 없었다.

2. /with-none-libs 에서는 thunk를 lib없이 직접 구현
thunk는 action객체를 return 하지 않으면 thunk함수를 return하는 속성을 활용해
thunk함수를 구현.
그러나 hooks를 활용하지 않은 api 통신은 작동시켜본 경험이 있으나,
hooks를 활용한 것은 Invalid hook call. Hooks can only be called inside of the body of a function component라는 에러발생으로 성공하지 못하였음

 

 

결과는 잘 구현되지는 않았다. 

 

useApi hooks를 thunk에서 활용했기 때문에 문제가 되었다.

그러나 useApi  hooks를 활용한 이유는 

react-error-boundary에서는 비동기 통신을 잡을 수 없기 때문에 useApi hooks를 활용해 

에러바운더리가 리액트 라이프 사이클 내에 있지 않은 것을 가져올 수 있도록 활용한 것.

 

 

둘다 포기하지 않을 방법은 없을까?  조금더 고민해봐야겠다. 

 

2. 현재까지 생각한 방식  : redux의 selector를 활용하여 상태가 변경시 navigate를 한다

생각해 볼것 : selector를 활용하면 리렌더링이 자주 발생하게 될텐데, 

단순히 redux store에 저장하는 방식이 성공했다는것만 알 수 있고 

그이후에 navigate같은 로직을 수행할 수 있다면 코드가 단순하며 관리하기 좋을 것 같다.