Relationship between list and item with relational data store (using react-redux)

Question

I'm using React with Redux as my store. I'm also using the react-redux library to integrate the two. My store contains two sets of data:

• Task { id, name, assigneeId }
• User { id, name }

I have a TaskListComponent which (using react-redux) connect-s to my store using:

@connect(state => {
    tasks: state.tasks,
    users: state.users
})

I need both because the list has a filter allowing for searching my task name or user name - my component needs to be 'user aware'.

This component lists out another component called TaskItemComponent which displays the task name and the name of the assigned user.

I'm struggling to decide on the best approach for resolving a task's assigned user.

• React guidelines tell me that the Item component should take a Task as a prop, and resolve the User itself in the render function. However, this requires the component to be store-aware and, using the react-redux library, it doesn't appear to be designed to allow a component to access the store without being connect-ed to it.

• Or I could resolve the User in the list and pass it to the Item component along with the task, e.g. <TaskItemComponent task={task} assignee={resolveTaskAssignee(task)} />. This has the benefit of keeping my Item 'dumb', and means I don't need to have it listening to store changes (or even know about the store).

Any advice would be appreciated.

Answer 1

Both approaches are fine. I'd start with passing props from outside, and once it gets tedious, let the Task component receive task as a prop but read its user by using connect.

See also https://stackoverflow.com/a/25701169/458193.

Answer 2

There's nothing inherently wrong with option #2. You have to do data ops somewhere. It will always be the right place to do those ops in the smart component.

Personally, I'd prefer a better data model in the store. But, you got what you got.