单个组件中的多个 Redux 状态 - Typescript、React、Redux

在身份验证期间，我返回一些需要在整个用户生命周期中携带到其他组件中的内部 ID。这些值保存在authentication状态，所有其他相关组件逻辑都保存在resources state.

当我在组件中以多个状态运行时，身份验证状态似乎会以某种方式覆盖资源状态，从而使我得到的值undefined尽管 React 状态肯定具有这些值（使用 React Dev Tool 确认）。

这是我的组件中的相关代码：

道具类型：

type ResourceProps =
    ResourceState.ResourceState
    & AuthState.AuthState
    & typeof ResourceState.actionCreators
    & RouteComponentProps<{ }>;

Redux 连接：

export default connect(
    (state: ApplicationState) => state.resources && state.authentication,
    ResourceState.actionCreators 
)(ResourceDisplay) as typeof ResourceDisplay;

我如何使用不同状态的示例。请看我在代码中的注释：

    //customerInfo comes from authentication state.
    if (this.props.customerInfo.subscriptions.length == 0) {
        console.log('empty subs list');
    }
    else {
        this.props.customerInfo.subscriptions.forEach(function (subscription) {
            // retrieveResources is an action being called from resources. This action populates the resources state.
            this.props.retrieveResources(subscription);
        });

        // This is the resources state that is definitely populated but returning `undefined` in the code.
        console.log(this.props.resources);
    }

我是否只是从根本上误解了 connect 实际上如何将 props 连接到 Redux 状态？

你在期待什么connect()在这里做什么？

export default connect(
    (state: ApplicationState) => state.resources && state.authentication,
    ResourceState.actionCreators 
)(ResourceDisplay) as typeof ResourceDisplay;

因为此刻你所说的只是返回state.authentication if state.resources是“真实的”（很可能是这样）。换句话说，state.resources不会传递给您的组件。

我猜您实际上想结合两者的属性？如果是这种情况，您需要执行以下操作：

export default connect(
    (state: ApplicationState) => { ...state.resources, ...state.authentication },
    ResourceState.actionCreators 
)(ResourceDisplay) as typeof ResourceDisplay;

Or use Object.assign()或其他东西（不完全确定您期望从代码中获得什么 props 格式）。