0

I have a redux state holding various keys and values:

data: {
  item1: {
    id: 1
    name: 'Shirt',
    cost: 3
  },
  item2: {
    id: 2
    name: 'Pants',
    cost: 10
  },
  item3: {
    id: 3
    name: 'Hat',
    cost: 7
  }
}

I have an interface where the user can change these values. I want them to be able to make any number of changes to this data and if they want to go back to the original state, they can hit a reset button.

How would you go about structuring the redux state to hold the edit information?

What I'm imagining is simply starting with the original state, and then duplicating the original state. So I'd have originalMenu and editedMenu in the redux state. That way any deletions, inserts, edits, etc. will be contained to the editedMenu part of the state.

The above doesn't seem very clean because I'd need to store duplicate data in the redux state. I was also imagining having a menuEdits part of the state that just houses the changes. So it'd have the id and whatever values have been changed. Or an isDeleted field for removed items.

Vtron89
  • 35
  • 6
  • Possible duplicate of [How to reset the state of a Redux store?](https://stackoverflow.com/questions/35622588/how-to-reset-the-state-of-a-redux-store) – Sterling Archer Mar 12 '18 at 14:53

1 Answers1

0

I think you should have three states in your data object: past, present and future. Can you check this https://github.com/reactjs/redux/blob/master/docs/recipes/ImplementingUndoHistory.md out?.I think it may be helpful.

dnp1204
  • 471
  • 5
  • 14
  • This is really helpful, thank you. I hadn't considered doing this but I love the idea. Lucky all the editable data in my state is in the same area. – Vtron89 Mar 12 '18 at 18:41
  • Hi, is there any update for this repo/ answer? The link now leads to a 404. – Maiya Mar 09 '22 at 16:16
  • @Maiya https://redux.js.org/usage/implementing-undo-history – dnp1204 Nov 24 '22 at 16:12