Reduxストアのタイプ定義

Question

React/ReduxプロジェクトでTypescriptを使用しましたが、タイプ定義をアプリケーション状態に適用する方法が不明です。 mapStateToPropsを介してコンテナコンポーネントに利用可能な状態の部分を作成しようとしています。しかし、私は、 '状態'が型定義を持っていなければならないと言っている間違いを得る。

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

Answer 1

あなたは状態のタイプと戻り値の型を宣言する必要があります。次はその仕事をするべきです。

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

タイプ定義や具体的なクラスがある場合は、anyを置き換えることができます。

あなたが使用できるいくつかのデフォルトのタイプ：

any 
string 
number 

Answer 2

あなたは、アプリケーション全体の状態を表すインターフェイスを作成する必要があります。

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);