NGRX passing reducer state into components

Question

I have a tasks reducer which represents the following object:

{
    error: false,
    loading: false,
    tasks: []
}

Now, the object is passed down into a dumb component:

<task-list tasks="tasks$ | async"></task-list>

The thing I don't like is the fact that to access the list of tasks I have to use tasks.tasks. I've considered passing error, loading and tasks into the component separately as well as using getters. However, this presents another issue when I pass in say tasks and users ... I'd had to pass in a loading and error property for both tasks and users

Is this an awkward issue that people just accept or is there a better way around this?

If you are keeping separate `error` and `loading` states for tasks and users, you might want to reconsider and and instead store general purpose `error` and `loading` states elsewhere. That would significantly simplify your tasks and users reducers. Have a look at http://stackoverflow.com/a/34482258/6680611 and http://stackoverflow.com/a/40496998/6680611 for some ideas. — cartant, Mar 21 '17 at 22:57

score 0 · Answer 1 · answered Mar 20 '17 at 17:41

0

Are you bothered by tasks.tasks ?

What's wrong with using a slice of state called tasks, that would contain

{
    error: false,
    loading: false,
    currentTasks: []
}

answered Mar 20 '17 at 17:41

Lev

13,856
14
52
84

score 0 · Answer 2 · answered Jul 07 '22 at 22:04

I don't know if you are still looking for an answer, but I always say if something looks intuitively off then it pays off to invest 5 minutes into looking for a better way. Here I would rename the reducer and input:

<task-list state="taskListState$ | async"></task-list>

NGRX passing reducer state into components

2 Answers2