Поток | Redux | Не удается передать StateProps и DispatchProps для подключения функции - PullRequest
Новая
       30

Поток | Redux | Не удается передать StateProps и DispatchProps для подключения функции

2 голосов
/ 05 мая 2020

Объявление потока для функции redux connect выглядит следующим образом: 

declare export function connect<-P, -OP, -SP, -DP, S, D>(
  // ...
)

оно взято из: https://github.com/flow-typed/flow-typed/blob/master/definitions/npm/react-redux_v7.x.x/flow_v0.104.x-/react-redux_v7.x.x.js

Пожалуйста, поправьте меня, если я ошибаюсь:

  • P - обозначает Опоры . Только все свойства, которые этот компонент должен в конечном итоге получить.

  • OP - означает OwnProps . Свойства, которые должны быть переданы в подключенный компонент (т.е. не производные от состояния).

  • SP - означает StateProps . Реквизиты, производные от состояния, которое должно возвращать mapStateToProps.

  • DP - означает DispatchProps . Реквизиты, полученные из отправки, которые должны быть возвращены mapDispatchToProps.

  • S - означает Состояние . Тип состояния для передачи mapStateToProps.

  • D - означает Отправка . Тип отправки mapDispatchToProps.

Если все приведенные выше утверждения верны, то мне все кажется ясным и логичным.

Итак, когда я ' м пытаюсь передать эти обобщенные типы: 

/* @flow */

import React from 'react';
import { connect } from 'react-redux';
import * as ActionCreators from './actionCreators';
import type { Todo } from './types';
import type { State } from './reducers';

type OwnProps = {||};

type StateProps = {|
  +todos: Array<Todo>;
|};

type DispatchProps = $ReadOnly<typeof ActionCreators>

type Props = {|
  ...OwnProps;
  ...StateProps;
  ...DispatchProps;
|};

export const TodoList = (props: Props) => (
  <div>
    // ...
  </div>
);

const mapStateToProps = (state: State) => ({
  todos: state.visibleTodos,
});

const mapDispatchToProps = ActionCreators; // redux will automatically call `bindActionCreators`

export default connect<Props, OwnProps, StateProps, DispatchProps, State, _>(
  mapStateToProps,
  mapDispatchToProps
)(TodoList);

Я получаю следующий вывод из потока, почему? 

Cannot call connect because:
 - Either property todos is missing in object type [1] but exists in StateProps [2] in type argument SP.
 - Or property addTodo is missing in object type [3] but exists in DispatchProps [4] in type argument DP.
 - Or property todos is missing in object type [5] but exists in StateProps [2] in type argument SP.
 - Or property todos is missing in object type [6] but exists in StateProps [2] in type argument SP.

        src/components/TodoList/index.jsx
         72|
         73| const mapDispatchToProps = ActionCreators;
         74|
 [2][4]  75| export default connect<Props, OwnProps, StateProps, DispatchProps, State, _>(
         76|   mapStateToProps,
         77|   mapDispatchToProps,
         78| )(TodoList);

        flow-typed/npm/react-redux_v7.x.x.js
    [1] 148|   declare export function connect<-P, -OP, -SP: {||}, -DP: {||}, S, D>(
           :
    [3] 156|   declare export function connect<-P, -OP, -SP, -DP: {||}, S, D>(
           :
    [5] 166|   declare export function connect<-P, -OP, -SP: {||}, -DP, S, D>(
           :
    [6] 176|   declare export function connect<-P, -OP, -SP: {||}, -DP, S, D>(

Found 1 error

Заранее спасибо.

1 Ответ

0 голосов
/ 06 мая 2020

Оказывается, это ошибка потока с выводом типа. Я решил эту проблему, явно добавив тип возврата StateProps к mapStateToProps.

...