react: Undo Movements on State by means of Enforcing an undoHistory Characteristic with Jotai Atoms

Incessantly instances you can need the consumer of your application as a way to undo an motion that they have taken. Including this option calls for you to stay monitor of the movements that experience took place and what state the application used to be in at every motion.

To unravel this, you can wish to retailer the historical past by hook or by crook. With Jotai, for the reason that atoms that you’re the use of are immutable you’ll save a snapshot of an atom when an motion is taken and retailer that to be used afterward.

We will be able to change the former shapesAtomsAtom that saved the array of our svg shapes with a historyAtom that can upload every snapshot of the canvas to an array. We will be able to then export a brand new shapesAtomsAtom that can behave precisely like the former one in addition to a saveHistoryAtom that we will be able to use after we replace our state. This may occasionally permit imposing an undoHistory atom that can take away any shapes or colours that we do not need to use on our canvas.