React Redux — условный селектор

В моем приложении у меня есть много частей состояния, которые имеют значение только тогда, когда пользователь вошел в систему.

Когда пользователь входит в систему и переходит непосредственно на страницу, маршрутизатор отображает страницу, но должен выполнить асинхронный вызов, поэтому часть состояния еще не заполнена.

Теперь предположим, что мне нужно показать кнопку на панели навигации, которая должна принимать часть состояния, но это состояние не заполняется после завершения асинхронного вызова.

Более практично, у меня есть этот селектор:

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

С этим проблем нет, т.к. selectedCustomer является частью редуктора initialState

Проблема в этом селекторе:

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

Часть состояния entities в initialState представляет собой пустой массив и будет заполнена при асинхронном вызове.

Итак, когда приложение запускается и я сопоставляю (с подключением - mapStateToProps) селектор getSelectedCustomerName, я получаю сообщение об ошибке, потому что entities пусто и уверен, что поле customer еще не существует

Простое решение, если взять на место некоторые if-else, но мне придется сделать это в «каждой» части приложения.

Я спрашиваю, есть ли лучшее решение, чтобы избежать этого...


person Mistre83    schedule 26.06.2016    source источник


Ответы (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;
}

Это классический пример шаблона Null Object (надеюсь, вы не не возражайте, что код написан на Ruby).

person Ashitaka    schedule 27.06.2016
comment
Наткнулся на это. Понравилось сопоставление JavaScript/Ruby. - person larz; 22.12.2017