单个组件中的多个 Redux 状态 - Typescript、React、Redux [英] Multiple Redux states in a single component - Typescript, React, Redux

问题描述

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

During authentication I return some internal ids that need to be carried into other components throughout the users life cycle. These values are kept in the authentication state, and all other relevant component logic is kept in the resources state.

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

When I am running with multiple states in the component, it appears the authentication state overwrites the resources state in someway making the values I'm getting undefined despite the React state definitely having the values (Confirmed using the React Dev Tool).

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

Here is the relevant code from my component:

道具类型:

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;

我如何使用不同状态的示例.请在代码中查看我的评论:

Example of how I'm using the different states. Please see my comments in the code:

    //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 状态的?

Am I just fundamentally misunderstanding how connect actually connects props to the Redux state?

推荐答案

您希望 connect() 在这里做什么?

What are you expecting connect() to do here?

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

因为目前，您所说的是仅在 state.resources 是真实的"(它可能是)时才返回 state.authentication.换句话说，state.resources 不会传递给您的组件.

Because at the moment, what you're saying is to only return state.authentication if state.resources is "truthy" (which it probably is). In other words, state.resources won't be passed to your component.

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

I'm guessing you actually want to combine properties from both? If that is the case you need to do something like:

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

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

Or use Object.assign() or something else (not entirely sure what props format you expect from your code).

这篇关于单个组件中的多个 Redux 状态 - Typescript、React、Redux的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！