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

Question

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

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

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

道具类型：

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;

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

    //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.resources 是“真实的”（可能是）时才返回 state.authentication。换句话说，state.resources 不会被传递给你的组件。

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

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

或使用Object.assign() 或其他东西（不完全确定您希望从代码中获得什么道具格式）。