[React] redux-thunk , dispatch 연결 안되는 오류

프로젝트를 진행하다가, redux를 활용해서 기능을 해줘야하는데, 비동기 처리를 해줘야 하는 경우가 생겼다.

 

따라서 원래 구현했던 redux 코드들에 redux-thunk 미들웨어를 추가해서 비동기 작업을 추가하려 해주었다.

 

 

export const setBlockRightSizeAsync = (
  payload: setBlockRightSizeType,
): ThunkAction<void, RootState, null, BlockAction> => {
  //리턴타입, Root상태, ExtraArgument타입, action의 타입 순서대로 넣음
  const { leftPos, dayPosMap, id, width, projectId } = payload;

  return async (dispatch, getState) => {
    /* 생략 ... */
    dispatch<BlockAction>(setBlock(newBlockInfo)); //dispatch 해주는 부분
  };
};

 

위처럼 thunk함수를 만든 이후, 

 

 

dispatch(
          setBlockRightSizeAsync({ id, leftPos, dayPosMap, width, projectId }),
        );

다음과 같이 dispatch를 통해서 thunk 함수를 실행시켜주려 했는데

 

 

 

아래와 같은 에러가 발생했다.

ThunkAction is not assignable to parameter of type 'AnyAction'.

 

 

 

dispatch를 호출해서 나온 반환값이 기본적으로 <AnyAction> 으로 설정되어 있는데, Thunk함수를 살펴보면 ThunkAction<void, RootState, null, BlockAction>

위에서 반환값으로 설정한 타입처럼 되어있기 때문이다. 

 

해당 문제를 고치기 위해서는 useDispatch를 가져올때, AnyAction이 아닌, ThunkAction이 되도록 타입을 설정해줘서 해결해주었다.

 

 

 

  const dispatch = useDispatch<ThunkDispatch<any, any, any>>();