redux-thunk의 then

예를 들어 Todo list에 하나의 아이템을 추가·편집·삭제한 후,
다시 서버에 Retrieve List를하고 싶은 경우가 있네요.
redux-thunk는 다음과 같이 느낄 수 있습니다 :

const createActionCreator = (item) => {
  return dispatch => {
    return axios
      .post('api/todo', item)
      .then(response => {...}) // 割愛します
  }
}

const retrieveActionCreator = () => {
  return dispatch => {
    return axios
      .get('api/todo')
      .then(response => {...}) // 割愛します
  }
}

// どこかで
dispatch(createActionCreator(newItem))
  .then(() => {
    dispatch(retrieveActionCreator())
  })

// ちなみに
dispatch(createActionCreator(newItem))
dispatch(retrieveActionCreator())
// こういう風に書くと、両者ともAsync Callなのでどれが先に完成するのかは保証できませんので。
// 上みたいにthenを使う必要はあります。

useDispatch의 dispatch를 사용할 수 없습니다.

언어: Typescript
JS라면 아마 에러 나오지 않네요.

import { useDispatch } from 'react-redux';

const dispatch = useDispatch()

dispatch(createActionCreator(newItem))
  .then(() => { // このthenでエラーが出ます
    dispatch(retrieveActionCreator())
  })

그림:

Property 'then' does not exist on type '...' 같은 에러가 나오네요.type 는 actionCreator 의 return type 그래서 사람에 따라서는 다릅니다만.

해결책

어쩌면 react-redux가 redux-thunk의 dispatch 의 형을 모르기 때문에, type check 가 다니지 않는 것 같습니다.

storeHelper.ts

import { ThunkDispatch } from 'redux-thunk';
import { Action } from 'redux';
import { useDispatch } from 'react-redux';

import { SystemState } from 'features/systemState';
// このSystemStateは自分で定義したReduxのStore構成、詳細は割愛します
// Todo Listだと { items: {name: string ,finished: boolean}[] } みたいな

export type ReduxDispatch = ThunkDispatch<SystemState, any, Action>;
export function useReduxDispatch(): ReduxDispatch {
  return useDispatch<ReduxDispatch>();
}

원본 파일에서 :

import { useReduxDispatch } from './storeHelper'

const dispatch = useReduxDispatch()
dispatch(createActionCreator(newItem))
  .then(() => { // できました
    dispatch(retrieveActionCreator())
  })

끝에

지적이 있으면, 코멘트를 받을 수 있으면 고맙습니다.
만약 도움이 되었으면 좋겠다를 받을 수 있으면 기쁩니다.