typescript + redux：排除父组件中的 redux 属性

在使用 TypeScript 和 Redux 进行开发时，有时候我们希望在父组件中排除 Redux 属性的传递。这种情况通常发生在我们希望在某个子组件中使用 Redux，但又不希望将 Redux 相关的属性一层层地传递给子组件的情况下。本文将介绍一种方法来实现这一需求，并提供相应的案例代码。

typescript
import React from 'react';
import { connect } from 'react-redux';
// 定义 Redux 的状态类型
interface RootState {
  count: number;
}
// 定义父组件的属性类型，包含 Redux 的状态和操作
interface ParentProps {
  count: number;
  increment: () => void;
}
// 定义子组件的属性类型，排除了父组件的 Redux 属性
interface ChildProps extends Omit {
  // 子组件自己的属性
  message: string;
}
// 父组件
const ParentComponent: React.FC = ({ count, increment }) => {
  return (
    
      
Count: {count}
      Increment
      
    
  );
}
// 子组件
const ChildComponent: React.FC = ({ message }) => {
  return 
{message}
;
}
// 使用 connect 函数将 Redux 的状态和操作映射到父组件的属性中
const ConnectedParentComponent = connect(
  (state: RootState) => ({
    count: state.count
  }),
  (dispatch) => ({
    increment: () => dispatch({ type: 'INCREMENT' })
  })
)(ParentComponent);
export default ConnectedParentComponent;