流量 |终极版 |无法通过 StateProps 和 DispatchProps 连接函数

Question

redux 连接函数的流程声明如下：

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 - 代表 Props。只是组件最终应该接收的所有道具。
OP - 代表 OwnProps。应该传递给连接组件的道具（即不是从状态派生的）。
SP - 代表 StateProps。从状态派生的道具，mapStateToProps 必须 return.
DP - 代表 DispatchProps。派生自 dispatch 的道具，mapDispatchToProps 必须 return.
S - 代表 State。要传入的状态类型 mapStateToProps.
D - 代表 Dispatch。要传入的调度类型 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

提前谢谢你。

Answer 1

事实证明这是类型推断的流程错误。我通过显式添加 StateProps return 类型到 mapStateToProps.

解决了这个问题

流量 |终极版 |无法通过 StateProps 和 DispatchProps 连接函数

Flow | Redux | Can't pass StateProps and DispatchProps to connect function

reactjs

redux

react-redux

flowtype