Как правильно набрать действие создателей, сопоставленных с реквизитом в реаги-редуксе - PullRequest
Новая
       12

Как правильно набрать действие создателей, сопоставленных с реквизитом в реаги-редуксе

2 голосов
/ 14 июня 2019

В нашем проекте все создатели действий определены так: 

export const actionCreatorFunctionName(arg1, arg2...) {
    return (dispatch: Dispatch, getStore: () => StoreState) => {
        // ... function logic ...
        dispatch(actionFunctionName(args...));
    }
}

Некоторые создатели действий отправляют HTTP-запросы и не вызывают dispatch до разрешения запроса.

Эти создатели действий сопоставляются с реквизитами, используя connect hoc, например: 

import * as ActionCreators from "./actionCreators";

connect(mapStateToProps, { actions: ActionCreators })(SomeComponent);

Проблема в том, что при использовании этой настройки кажется невозможным правильно настроить интерфейс реквизита для компонента. Мы попытались настроить реквизиты следующим образом: 

interface Props {
    actions: typeof ActionCreators;
}

Но это не работает, потому что реквизит actions на самом деле не тот же тип, что и ActionCreators, потому что connect hoc изменяет actionCreators из функций, которые возвращают функции в простые функции.

Ответы [ 2 ]

1 голос
/ 14 июня 2019

Я думаю, что помимо определения действий, вы захотите определить тип Actions, который вы сможете экспортировать и использовать в своих реквизитах. 

export type Actions = {
  action1: (arg1: string) => void,
  action2: (arg1: string, arg2: number) => void
}

export function action1(arg1: string) {
  // ...
}

А затем используйте интерфейс Actions вваш реквизит 

type Props = {
  actions: Actions
}
0 голосов
/ 14 июня 2019

Если я правильно понимаю, у вас возникли проблемы с отправкой state из store в Компонент? Если это так, давайте предположим, что у вас есть данные в вашем хранилище для объекта под названием items, поместите приведенный ниже код над оператором connect в Компоненте (это сделает данные items доступными для вашего Компонента); 

const mapStateToProps = (state) => {
  items: state.items
}
...