流量 |雷杜克斯 |无法传递 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-代表道具。只是该组件最终应该接收的所有道具。

• 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);

我从flow得到以下输出，为什么？

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

事实证明，这就是类型推理的流错误。我通过向mapStateToProps显式添加StateProps返回类型来解决这个问题。