NGRX 将 reducer 状态传递给组件

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?

Answer 1

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: []
}

Answer 2

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>