Redux存储状态的类型定义

Question

I just got into using Typescript for a React/Redux project and I am unsure of how type definitions should be applied to application state. I am trying to make a piece of state available to a container component through mapStateToProps . But I get an error saying 'state' must have a type definition.

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

Answer 1

You need to create an interface that represents the entire application state:

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

Then create one interface that represents the state for each smart component (a component that is connected to the store via mapStateToProps ):

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

The MyComponentState interface should be a subset of AppState . This means that you can actually do:

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

You also need to declare a type for the actions of the smart component:

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

type SomeComponentActions = { actions: typeof actionsCreators };

The properties of the smart component is the union of the type of its properties and its actions: 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>;
    }
}

You are mapping from the application state to the component state:

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

You need to declare the type of state and the return type. Following should do the job.

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

If you got type definitions or concrete classes, you can replace the any with them.

Some default types you can use:

any
string
number