React / Redux - Let's say we have two separate lists of Todo Items, completed, and uncompleted

Question

I have just learned React / Redux not long ago and I am thinking about a scenario which is probably not too uncommon.

Let's suppose we have a simple array of objects that are Todo items, and we have simply two boxes on the screen: Completed, and Uncompleted. When we click an item from the Uncompleted box, it should be immediately moved and rendered in the Completed box.

What would be the better way to filter these array items, in REDUX? or in REACT? Which of these two examples below is the better practice for this particular example? Thanks.

A) A user clicks on an item from the Uncompleted Todo list, which sets an action creator off to dispatch an action with a type called ITEM_COMPLETED. This action is listened for in BOTH the Uncompleted itmes AND Completed items reducers. In the Uncompleted items reducer, when this action is 'heard', a filter method simply gets called on the current array to remove the item that was passed through, and on the Completed items list, the item is simply added to the array spread. In this way, the item will be removed from the Uncompleted div, and appear to have moved to the Completed div.

or...

B) There is only one action, and that is an ACTION_TOGGLE type. When an object gets clicked from the Uncompleted list, for example, it goes through an action creator that creates a brand new object with the Completed value being set to TRUE, removes the old Todo object from the array, and then creates a new copy of the array for the brand new state with that newly adjusted object inserted in...And NOW, the logic for separating items on the VIEW layer in react would be in the react container instead. I.E., the render method would take ALL the items, and put them in DIV A if they are filtered as Uncompleted values, and put them in DIV B if they are filtered as Completed values, therefore giving the perception to the user that some items are in an Uncompleted box, and some items are in the Completed box.

Thank you!

Answer 1

TL;DR: Option B, because better separation of concerns (which is important for the future of your app, not necessarily the present).

You have a list of todos whose statuses are changing. There are 2 ways to look at this:

Type 1: Fundamentally, I have 2 types of todos.

Completed todos & Uncompleted todos. In this case, your state contains 2 objects and so on. In this case, option A seems to be the more correct approach

const completedTodos = [{}, {}];
const uncompletedTodos = [{}, {}];

Type 2: I have a list of todos each with different attributes

Each todo has a status completed/uncompleted. In this case, option B seems to be correct

const todos = [{...completed: true}, {...completed: false}];

Why does this even matter?

Because this determines how you see your application. In the future, will you be adding more things to your list of todo items? In that case, will you have multiple types of todos (A) or todos that have multiple tags (B)?

For eg: Suppose you decide to add tags to your todo. In this case, having a reducer to handle the action {type: TOGGLE_TAG, data: {id: <todoid>, tag}} seems to be a better way to go, similar to what you have in Option B for managing the completed status.

It is the concern of the View, i.e. the react component, to figure out how to display this data. So if you need to iterate through the list filter them out to create 2 different lists etc. that is the view's concern and the logic for that should be in the React render() method.

Answer 2

I would say that in this simple example approach B is probably best and the most straight forward. You can just store Todo object arrays with the completed value set to true and then just have the views hooked up to the store decide what to show where.