Skip to content
Submitted almost 3 years ago

Todo app using React and Redux

Andrew Southern•390
@whoamihealay
Preview site (opens in new tab)View code (opens in new tab)
This is a solution for...Todo app
  • HTML
  • CSS
  • JS
3intermediate

Design comparison

SolutionDesign

Solution retrospective

Hi guys !

I was able to find a few ways to make the list items draggable but not rearrange the order while complying with Redux's best practices. My idea was to switch the IDs of the two components, but that would mean mutating the state. Am I correct? I'm open to ideas and feel free to open issues on the repo!

Community feedback

  • Travolgi 🍕•31,400
    @denieldenPosted almost 3 years ago

    Hi Andrew, great job!

    If you change the IDs you have to change the state by force. This, however, could generate bugs... the id is always good that it remains the same forever.

    One solution could be to add a property in the todo that identifies the order position.

    Hope this help ;)

    Marked as helpful
    0
    Andrew Southern•390
    @whoamihealayPosted almost 3 years ago

    @denielden Hi, thank you for answering.

    If I understand, does that mean the property should be local to the todo components and managed by the list component instead of the global state?

    1
    Travolgi 🍕•31,400
    @denieldenPosted almost 3 years ago

    @whoamihealay Yes, such a thing:

    {
name: 'todoName',
id: 'idTodo',
completed: false,
order: 1
}

    happy coding ;)

    Marked as helpful
    0

Please log in to post a comment

Log in with GitHub

Join our Discord community

Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!

Join our Discord