Question

在我的react-redux-typescript应用程序中，我有多个子状态，形成应用程序状态。申请状态如下。

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

我使用connect方法将React组件中的一个子状态作为 props 。但现在我有一个案例，我需要在组件中提供两个子状态属性作为其 props 。
特别是这些部分：

interface LoadingState {
    size: number
    available: boolean
}

interface StatusState {
    name: string
}

通常，我在组件Loading中使用connect方法如下：

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

Loading组件的标题是：

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

如果我这样做，我将LoadingState界面的属性作为道具提供。但是，如果我还需要来自StatusState的属性作为同一组件中的道具，我该怎么办？

Answer 1

首先你的道具需要期望StatusState

type LoadingProps = LoadingState & StatusState & typeof actionCreators

然后你的mapStateToProps函数只需要返回一个包含映射的所有属性的对象，最简单的方法是从状态值中使用spread（...）

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

将多个redux子状态连接到React组件

1 个答案: