DEV Community

loading...

Selectors in Redux

fosteman profile image Timothy Fosteman ・2 min read

The concept of selectors in Redux enables retrieval of derived properies from you state. A selector is a function that takes the state as arguement and returns a substate or derived properties of it. It can be that they only return a substate of your global state or that they already preprocess your state to return derived properties. The function can take optional argument to support the selection of the derived properties.

Plain Selectors

Selectors usually follow the same syntax. The mandatory argument of a selector is the state from where it has to select from. There can be optional arguments that are in a supportive role to select the substate or the derived properties.

state => derived properties
(state, arguments) => derived properties

Selectors are optional, and whenever you think of Redux, actions, reducers and the store itself are mandatory - Action Creators are optional likewise - Selectors simplify developer's experience.

function mapStateToProps(state) {
    return {
        windows: state.windows,
    }
}

To do this substate retrieval implicitly via selector

function getWindows(state) {
    return state.windows;
}
function maStateToProps(state) {
    return {
        windows: getWindows(state)
    }
}

It is similar to the action and reducer concepts. Instead of manipulating the state directly in the Redux store, you will use action and reducer to alter it indirectly. The same applies for selectors that don't retrieve the derived properties directly but indirectly from the global state.

It is an advantage, if not to think about it too much. A selector is a pure function, hence it can be reused, tested - derived properties may be required elsewhere in an application.

Moreover, they may not be as trivial, as in the example above - they may utilize one of the normalizer libraries, of which I sort scribbled a little previously. Therefore it may potentially unload mapStateToProps() from excessive complexity.

Discussion (2)

pic
Editor guide
Collapse
maryvorontsov profile image
Mary Vorontsov

Hey! Would you be interested in writing a couple of articles (paid) for our blog?

Collapse
fosteman profile image
Timothy Fosteman Author • Edited

Howdy Mary, looking forward to it.