React Redux - Conditional selector

Question

In my application i have many part of the state that is significative only when the user is logged in.

When the user is logged in and navigate directly to a page, router display the page but have to make async call, so a piece of the state is not yet populated.

Now, suppose i have to show a button on navigation bar that have to take a part of the state, but this state is not populated since the async call finis.

More pratically, i have this selector:

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

With this, there are no problem, because selectedCustomer is part of the initialState reducer

The problem is in this selector:

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

The part of the state entities in initialState is an empty array and will be populated on async call.

So, when the application start and i map (with connect - mapStateToProps) the selector getSelectedCustomerName i get the error because entities is empty and sure, customer field do not exist yet

A simple solution if to take in place some if-else, but i will have to do this in "every" part of the application.

I'm asking if there is a better solution to avoid this...

Ashitaka · Accepted Answer · 2018-01-25 09:59:07Z

2

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;
}

This is a classic example of a Null Object pattern (hope you don't mind the code being in Ruby).

edited Jan 25, 2018 at 9:59

answered Jun 27, 2016 at 0:56

Ashitaka

19.2k6 gold badges58 silver badges70 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

larz Over a year ago

Stumbled on this. Enjoyed the JavaScript/Ruby juxtaposition.

Collectives™ on Stack Overflow

React Redux - Conditional selector

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related