Получить правильный тип отправки, используя ConnectedProps с redux-thunk

Question

Согласно заголовку, я использую Redux-Toolkit & Typescript. В частности, я пытаюсь использовать ConnectedProps, как предложено в redux docs . К сожалению, похоже, что тип отправки не соответствует действительности (в частности, он считает, что он имеет обычный тип отправки, а не ThunkDispatch).

Есть предложения? На данный момент я либо:

(1) Используя пользовательский хук 'useThunkDispatch'. Но это вводит дополнительную строку + импорт, который я на самом деле не хочу.

(2) Используя версию функции 'mapDispatch', явно указав мою диспетчеризацию как ThunkDispatch (или AppDispatch, как показано в Редукс инструментарий документов

Код Песочница: https://codesandbox.io/s/connectedprops-typing-for-thunk-uyplw

Answer 1

Согласно вашему комментарию, явное использование dispatch от connect на самом деле является проблемой здесь.

Поскольку ваше хранилище Redux определяется отдельно от компонентов React, которые используют хранилище, у них нет возможности узнать, какие настройки вы могли использовать при создании хранилища. Для TS, в частности, connect не может знать, что в вашем магазине применено промежуточное ПО thunk, и поэтому следует набирать dispatch prop как ThunkDispatch вместо Dispatch.

Это одно из причины, по которым мы настоятельно рекомендуем использовать форму «сокращенного обозначения объекта» mapDispatch с connect, потому что тогда ваш компонент никогда не должен знать разницу.

Если вы действительно Если вы хотите явно указать dispatch в своем компоненте, у вас есть пара различных опций:

• Переключитесь на использование API-обработчиков React-Redux и , объявляющих тип dispatch получено от useDispatch
• Использовать форму функции mapDispatch с connect и явно объявить тип dispatch в качестве аргумента

Лично я бы порекомендовал идти с крючками.