react-redux 和 component with children 有问题

Question

我认为使用 react-redux 进行打字有一些我无法理解的地方。考虑一下：

import React from 'react';
import { Text } from 'react-native';
import { connect } from 'react-redux';
import { AnyAction } from 'redux';
import { ThunkDispatch } from 'redux-thunk';

function SomeComponent_Unconnected(
  props: React.PropsWithChildren<{ foo: string; handleSmth: () => void }>
) {
  return <>
    <Text>{props.foo}</Text>
    {props.children}
    </>;
}

interface IState {
  foo: string;
}

const SomeComponent = connect(
  // map state to props
  (state: IState) => ({ foo: state.foo }),

  // map dispatch to props
  (dispatch: ThunkDispatch<IState, any, AnyAction>, getState: () => IState) => ({
    handleSmth: () => {
      console.log('something happened');
    },
  }),
)(SomeComponent_Unconnected);

export function AnotherComponent() {
  return (
    <SomeComponent> {/* TS error here, see below */}
      <Text>Test</Text>
    </SomeComponent>
  );
}

这里是 React 中 Redux 的基本用法，但是我在 AnotherComponent 中遇到了一个奇怪的 TS 错误：

Type '{ children: (string | Element)[]; }' is not assignable to type '() => IState'.
Type '{ children: (string | Element)[]; }' provides no match for the signature '(): IState'.ts(2322)

请注意，如果我删除 connect 函数的 mapDispatchToProps 部分，此错误就会消失。

你知道这个错误是从哪里来的吗？谢谢！

Answer 1

来自 redux 文档：If your mapDispatchToProps function is declared as taking two parameters, it will be called with dispatch as the first parameter and the props passed to the connected component as the second parameter。

它没有您提供的 getState 参数。您使用 >.

过早地关闭了 ThunkDispatch 的通用类型参数

react-redux 和 component with children 有问题

Something wrong with react-redux and component with children

typescript

reactjs

redux

react-redux