Selectors in Redux

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.