1. 10
    Redux: Colocating Selectors with Reducers
    4m 52s

Redux: Colocating Selectors with Reducers

Dan Abramov
InstructorDan Abramov

Share this video with your friends

Send Tweet

We will learn how to encapsulate the knowledge about the state shape in the reducer files, so that the components don’t have to rely on it.

Pavel Dolecek
Pavel Dolecek
~ 5 years ago

Discussion here https://twitter.com/dan_abramov/status/664581975764766721

Kristian
Kristian
~ 5 years ago

In a large application won't this mean there are possibly hundreds of selector functions in the root reducer?

I wonder if there is a way to import selectors from child reducers via an import * and apply the relevant slice of the state tree to them?

Afzal
Afzal
~ 4 years ago

In reducers/index.js why do we not have curly braces here?

export const getVisibleTodos = (state, filter) =>
    fromTodos.getVisibleTodos(state.todos, filter);

If I put curly braces it gives me an error (cannot read map of undefined in todolist ie not getting todos in todolist.js) and doesn't work

// doesn't work
export const getVisibleTodos = (state, filter) => {
    fromTodos.getVisibleTodos(state.todos, filter);
};
Deep
Deep
~ 4 years ago

I think it's a matter of being implicit vs explicit. What happens if you put a return before fromTodos... in your example?

Enoh Barbu
Enoh Barbu
~ 3 years ago

@strajk thanks

J. Matthew
J. Matthew
~ a year ago

I wonder if there is a way to import selectors from child reducers via an import * and apply the relevant slice of the state tree to them?

Isn't that exactly what's happening in this lesson?

J. Matthew
J. Matthew
~ a year ago

In reducers/index.js why do we not have curly braces here?

export const getVisibleTodos = (state, filter) =>
    fromTodos.getVisibleTodos(state.todos, filter);

As @Deep suggested, this is an example of an implicit return. The ES6 arrow-function syntax allows you to skip the curly braces and the return keyword if the only thing you're doing inside the function is returning something. The => <value>; is equivalent to => { return <value>; }.

If I put curly braces it gives me an error (cannot read map of undefined in todolist ie not getting todos in todolist.js) and doesn't work

// doesn't work
export const getVisibleTodos = (state, filter) => {
    fromTodos.getVisibleTodos(state.todos, filter);
};

As you might guess from the above, the reason it doesn't work is because, if you do use the curly braces, then you also need to use the return keyword to do the actual returning. You're getting an error because the function is expected to return something, and suddenly it's not.

// works
export const getVisibleTodos = (state, filter) => {
    return fromTodos.getVisibleTodos(state.todos, filter);
};