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

Question

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

当我在组件中以多个状态运行时，似乎身份验证状态会以某种方式覆盖资源状态，从而使我获得的值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 状态的吗？

Answer 1

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

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

因为目前，您所说的是仅state.authentication在state.resources“真实”（可能是）的情况下才返回。换句话说，state.resources不会传递给您的组件。

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

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

或者使用Object.assign()或其他东西（不完全确定你期望从你的代码中得到什么 props 格式）。