Redux + Typescript + 功能组件：进口组件需要来自 Redux 的道具

Question

我有一个看起来像这样的组件：

• 它有一个带有“警报”属性的接口
• 它连接到 Redux 并从道具中获取“警报”。

 interface IAlert { alerts: { id: string; type: string; msg: string }[]; } const Alert: FC<IAlert> = ({ alerts }) => { return ( //does something with alerts ); }; Alert.propTypes = { alerts: PropTypes.array.isRequired }; const mapStateToProps = (state: any): object => ({ alerts: state.alerts }); export default connect(mapStateToProps, {})(Alert);

问题是：当我将此组件（创建警报）导入另一个组件时，我得到这个：

Property 'alerts' is missing in type '{}' but required in type 'Pick<IAlert, "alerts">'.ts(2741)

我不想将“警报”传递给导入的元素，而只是从 Redux 获取它。

谢谢您的帮助！

Answer 1

如果您使用的是功能组件，我建议您使用 useSelector 挂钩。

const Alert: FC = () => {
  const alerts = useSelector(state.alerts);

  return (
    //does something with alerts
  );
};


export default Alert;

Answer 2

通过使用 @Jannis 的答案中的useSelector钩子来获得 typescript 支持要容易得多。

您可以使用connect进行正确的输入。 您在这里没有得到它的原因是您的mapStateToProps function 的类型不正确。

const mapStateToProps = (state: any): object => ({
  alerts: state.alerts
});

connect使得组件的连接版本不再需要mapStateToProps或mapDispatchToProps添加的道具。 但是那些道具是什么？ . 您的mapStateToProps的类型定义并没有说它返回一个 prop alerts 。 它只返回object 。

返回IAlert会使您的错误 go 消失，因为现在connect知道alerts道具已经提供。

const mapStateToProps = (state: any): IAlert => ({
  alerts: state.alerts
});

---

如果您的state有正确的类型而不是any ，那么您根本不需要任何返回类型。 对于这个特定组件，您的IAlert道具类型实际上描述了所需的 state 和返回。

const mapStateToProps = (state: IAlert) => ({
  alerts: state.alerts
});

但通常您希望从您的商店或减速器获得 state 类型， 如此处所述。

export type RootState = ReturnType<typeof rootReducer>

export type RootState = ReturnType<typeof store.getState>

---

您需要在useSelector中使用该RootState ，但有一个有用的快捷方式，因此您无需在每次使用时都指定类型。 您可以按照此处的说明创建自己的useSelector挂钩的类型化版本。

import { TypedUseSelectorHook, useSelector } from 'react-redux'
export const useAppSelector: TypedUseSelectorHook<RootState> = useSelector

所以现在您的组件不需要任何道具，并且alerts变量的类型基于 state 的类型而已知

export default () => {

  const alerts = useAppSelector(state => state.alerts);

  return (
    //does something with alerts
  );
};