Question

我刚开始使用Typescript进行React / Redux项目，我不确定应该如何将类型定义应用于应用程序状态。我试图通过mapStateToProps为容器组件创建一个状态。但我得到一个错误，说“州”必须有一个类型定义。

function mapStateToProps (state) {
  return {
    deals: state.deals
  };
}

Answer 1

您需要创建一个代表整个应用程序状态的接口：

interface ApplicationState {
    someProp1: {
        someProp1a: string;
        someProp1b: number;
    };
    someProp2: {
        someProp1a: string;
        someProp1b: number;
    };
}

然后创建一个表示每个智能组件（通过mapStateToProps连接到商店的组件）的状态的接口：

interface SomeComponentState {
    someProp1: {
        someProp1a: string;
        someProp1b: number;
    };
}

MyComponentState接口应该是AppState的子集。这意味着您可以实际执行：

type SomeComponentProps = Pick<ApplicationState, "someProp1">;

您还需要为智能组件的操作声明一个类型：

const actionsCreators = {
    doSomething: (txt: string) => ({ type: "DO_SOMETHING", pleyload: txt })
};

type SomeComponentActions = { actions: typeof actionsCreators };

智能组件的属性是其属性类型及其操作的并集：SomeComponentProps & SomeComponentActions。

class MyComponent extends React.Component<SomeComponentProps & SomeComponentActions, void> {
    public render() {
        return <div onClick={() => this.props.actions.doSomething(this.props.someProp1.someProp1a)} >Click me!</div>;
    }
}

您正在从应用程序状态映射到组件状态：

function mapStateToProps(state: ApplicationState): SomeComponentProps {
    return {
        someProp1: state.someProp1
    };
}

function mapDispatchToProps(dispatch: Redux.Dispatch<typeof actionsCreators>) {
    return { actions : bindActionCreators(actionsCreators, dispatch) };
}

const MySmarthComponent = connect(mapStateToProps, mapDispatchToProps)(MyComponent);

Answer 2

您需要声明状态类型和返回类型。以下应该做的工作。

function mapStateToProps (state: any): any {
  return {
    deals: state.deals
  };
}

如果您有类型定义或具体类，则可以用它们替换any。

您可以使用的一些默认类型：

any
string
number

Redux存储状态的类型定义

2 个答案: