React Redux - 条件选择器

Question

在我的应用程序中，我有很多状态只有在用户登录时才有意义。

当用户登录并直接导航到页面时，路由器显示页面但必须进行异步调用，因此尚未填充状态。

现在，假设我必须在导航栏上显示一个按钮，该按钮必须采用状态的一部分，但自异步调用结束以来未填充此状态。

更实用的是，我有这个选择器：

export const getSelectedCustomer = state => state.systems.selectedCustomer;

这样就没有问题了，因为selectedCustomer是initialStatereducer

的一部分

问题出在这个选择器中：

export const getSelectedCustomerName = state => {
    return state.systems.entities[getSelectedCustomer(state)].customer;
}

initialState 中状态 entities 的部分是一个空数组，将在异步调用时填充。

因此，当应用程序启动并且我映射（使用连接 - mapStateToProps）选择器 getSelectedCustomerName 我收到错误，因为 entities 是空的，customer 字段还不存在

一个简单的解决方案，如果要放置一些 if-else，但我将不得不在应用程序的 "every" 部分执行此操作。

我在问是否有更好的解决方案来避免这种情况...

Answer 1

const NullCustomerEntities = {
    customer: "Anonymous"
}

export const getSelectedCustomer = state => state.systems.selectedCustomer;

export const getCustomerEntities = state => {
    return state.systems.entities[getSelectedCustomer(state)] || NullCustomerEntities;
}

export const getSelectedCustomerName = state => {
    return getCustomerEntities(state).customer;
}

这是空对象模式的经典示例（希望您不介意代码在 Ruby 中）。

React Redux - 条件选择器

React Redux - Conditional selector

reactjs

redux

reselect