我正在为我当前的网络应用程序使用 redux 和 typescript。

定义通过 @connect 接收 redux-actions 的组件的 props 以及来自父级的 props 的最佳实践是什么？ 示例:

// mychild.tsx
export namespace MyChildComponent {

  export interface IProps {
    propertyFromParent: string;
    propertyFromRedux: string;  // !!!! -> This is the problem
    actionsPropertyFromRedux: typeof MyReduxActions;  // !!!! -> And this     
  }
}

@connect(mapStateToProps, mapDispatchToProps)
export class MyChildComponent extends React.Component <MyChildComponent.IProps, any> {

... react stuff

}

function mapStateToProps(state: RootState) {
  return {
    propertyFromRedux: state.propertyFromRedux
  };
}
function mapDispatchToProps(dispatch) {
  return {
    actionsPropertyFromRedux: bindActionCreators(MyReduxActions as any, dispatch)
  };
}




// myparent.tsx
export class MyParentComponent extends React.Component <MyParentComponent.IProps, any> {

... react stuff

    render(){
        // typescript complains, because I am not passing `propertyFromRedux`! 
        return <div><MyChildComponent propertyFromParent="yay" /></div>;
    }

}

据我所知，我有 2 个解决方案。

1. 只需在我的整个应用程序中传递操作和状态。但这意味着即使只有一些小的子组件必须更改，我的整个应用程序也会重新呈现。还是在我的顶级组件中监听所有商店更改的 redux 方式？然后我将不得不在 shouldComponentUpdate 中为不是平面对象的 Prop 编写大量逻辑。

2. 将 MyChildComponent 的 IProps 中的参数设置为可选，如下所示:

-

// mychild.tsx
export namespace MyChildComponent {

  export interface IProps {
    propertyFromParent: string;
    propertyFromRedux?: typeof MyAction;  // This is the problem
  }
}

还有别的办法吗？以上两种方式在我看来都太乱了。

最佳答案

您需要拆分 Prop - 您需要一个 DispatchProps , StateProps , 和一个 OwnProps类型。您还必须将 TypeScript 的泛型与 connect 一起使用

• DispatchProps是你的行动创造者。
• StateProps是你的状态 Prop (duh) - 这些来自 mapStateToProps - 该函数的返回类型应与此类型匹配。
• OwnProps是您的组件接受(并且可能是期望的)的 Prop 。可选 Prop 应在界面中标记为可选。

我这样做的方式(没有装饰器，但我确信它适用于此)是

interface ComponentDispatchProps {
    doSomeAction: typeof someAction;
}

interface ComponentStateProps {
    somethingFromState: any;
}

interface ComponentOwnProps {
    somethingWhichIsRequiredInProps: any;
    somethingWhichIsNotRequiredInProps?: any;
}

// not necessary to combine them into another type, but it cleans up the next line
type ComponentProps = ComponentStateProps & ComponentDispatchProps & ComponentOwnProps;

class Component extends React.Component<ComponentProps, {}> {...}

function mapStateToProps(state, props) { 
    return { somethingFromState };
}

export default connect<ComponentStateProps, ComponentDispatchProps, ComponentOwnProps>(
    mapStateToProps,
    mapDispatchToProps
)(Component);

我认为你必须使用 @connect<StateProps, DispatchProps, OwnProps>它将装饰并返回一个接受 OwnProps 的类.

如果你看connect TS中的实现

export declare function connect<TStateProps, TDispatchProps, TOwnProps>(...): ComponentDecorator<TStateProps & TDispatchProps, TOwnProps>

interface ComponentDecorator<TOriginalProps, TOwnProps> {
    (component: ComponentClass<TOriginalProps> | StatelessComponent<TOriginalProps>): ComponentClass<TOwnProps>;
}

connect<...>返回 ComponentDecorator ，当传递组件时(在您的情况下，这是在将装饰器转译出来时透明地完成的)，而不管 StateProps , 和 DispatchProps返回一个需要 OwnProps 的组件.

connect (非通用)返回 InferableComponentDecorator

export interface InferableComponentDecorator {
    <P, TComponentConstruct extends (ComponentClass<P> | StatelessComponent<P>)>(component: TComponentConstruct): TComponentConstruct;
}

它试图根据提供给组件的 Prop 来推断 Prop ，在您的情况下是所有 Prop 的组合(OwnProps 从上面变为 ComponentProps)。

关于javascript - typescript + 终极版 : exclude redux props in parent component，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/43502291/