Typescript + Redux：在父组件中排除Redux道具

Question

我正在为当前的Web应用程序使用Redux和Typescript。

定义通过来接收redux-actions的组件的props以及@connect从parent 接收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. 只需通过我的整个应用程序传递操作并说明状态即可。但这意味着即使需要更改一些小的子组件，我的整个应用也会重新渲染。还是在所有商店更改中侦听我的顶级组件的替代方法？然后，我将不得不为shouldComponentUpdate不是平面对象的道具编写很多逻辑。

2. 设置帕拉姆中IProps的MyChildComponent 这样的可选：

--

// mychild.tsx
export namespace MyChildComponent {

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

还有另一种方法吗？在我看来，以上两种方式都太混乱了。

Answer 1

您需要拆分你的道具-
你需要一个DispatchProps，StateProps和OwnProps类型。您还必须将TypeScript的泛型用于connect

• DispatchProps 是您的动作创造者。
• StateProps是您的状态道具（duh）-它们来自mapStateToProps-该函数的返回类型应与此类型匹配。
• OwnProps是您的组件接受（也许期望）的道具。可选道具应在界面中标记为可选。

我这样做的方式（没有装饰器，但是我确定它在这里适用）是

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。

如果您看一下connectTS 中的s实现

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返回一个Expected
组件OwnProps。

connect （非一般）收益 InferableComponentDecorator

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

它将尝试根据提供给组件的道具来推断道具，在您的情况下，这是所有道具的组合（从上方OwnProps变为ComponentProps）。