Redux: Colocating Selectors with Reducers

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

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?

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

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

@strajk thanks

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?

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