複数のreduxサブ状態をReactコンポーネントに接続します。

Question

私のreact-redux-typescriptアプリケーションでは、アプリケーション状態を形成する複数のサブ状態があります。アプリケーションの状態は次のとおりです。私はpropsとして反応成分に利用可能なサブ状態のいずれかを取得するためconnect方法を使用

interface AppState { 
    dialogs: DialogState, 
    messages: MessageState, 
    notifications: NotificationsState, 
    errors: ErrorState 
    loading: LoadingState, 
    status: StatusState; 
} 

。しかし、今では、コンポーネント内で使用可能な2つのサブ状態プロパティがpropsである必要があるケースがあります。
具体的には、これらの部品：

interface LoadingState { 
    size: number 
    available: boolean 
} 

interface StatusState { 
    name: string 
} 

通常、次のようにI成分負荷の接続方法を使用する：

export default connect(
(state: AppState) => state.loading, actionCreators)(Loading); 

担持成分のヘッダである：

type LoadingProps = LoadingState & typeof actionCreators; 
class Loading extends React.Component<LoadingProps, {}> 

どうか私はLoadingStateインターフェイスのプロパティを小道具として利用できるとしますか？しかし、同じコンポーネントの小道具としてStatusStateのプロパティも使用できるようにするにはどうすればよいですか？

Answer 1

あなたの小道具もStatusState

type LoadingProps = LoadingState & StatusState & typeof actionCreators

を期待する必要が最初に次に、あなたのmapStateToProps機能だけでマップされているすべてのこれらのプロパティを含むオブジェクトを返すために必要となる、最も簡単な方法は、スプレッド（...）を使用することです状態値から

export default connect(
    (state: AppState) => ({...state.loading, ...state.status }), 
    actionCreators 
)(Loading)