What do you suggest to make undo?

Question

I use a series of data as follows:

[
  {
    name: 'name1',
    background:'red',
    child:[
        {
          name:'',
          id:'',
          color:'',
          text:'',
          border:''
          
        },
        {
          name:'',
          id:'',
          color:'',
          text:'',
          border:''
          
        }
      
      
      ]
  },
  {
    name: 'name2',
    background:'red',
    child:[
        {
          name:'',
          id:'',
          color:'',
          text:'',
          border:''
          
        },
        {
          name:'',
          id:'',
          color:'',
          text:'',
          border:''
          
        }
      
      
      ]
  }
  
  ]

I'm going to save all the changes to another variable, and I used a deep copy to do that, but when I log in, the variables are the same.I need to children all the children changes too.

I wrote it in Reducers


const Reducers =(state = initialState, action) => {
    switch (action.type) {
        case NEW_OBJECTS_PAST:

            const OldPast = JSON.parse(JSON.stringify(state.past))
            const newDate = JSON.parse(JSON.stringify(state.present))
            // const newDate = _.cloneDeep(state.present);

            const newPast = [
                                OldPast,
                                newDate
                            ];
            return {
                ...state,
                past : _.cloneDeep(newPast) ,
            }

        case OBJECTS:

            
            return  {
                        ...state,
                        present: action.objects,
                        // future:[]
            }

Do you suggest another way to build undo in REACT and REDUX ? I tried the libraries available for this, but got no answer.

user_521624 · Answer

First two remarks :

you should never deep clone parts of your state, it doesn't bring you any benefits as the state is immutable anyway, but is very detrimental for memory usage and for performance (both when doing the deep cloning and then when using the deep cloned state),
you should use Redux toolkit, which makes it way easier to write immutable reducers and prevent many errors.

To implement undo, I'm not sure what your actions are supposed to mean but you can do it as follows

the state contains state.present (the current state) and state.past (an array of past states)
whenever you do an action that you want to undo, you push the current state.present at the end of state.past and compute the new state.present
whenever you want to undo, you pop the last element of state.past and put it in state.present.

In your code I can't see any undo action, and you're also building nested arrays because of new Past = [oldPast, new Date], you most likely meant to spread oldPast.

What do you suggest to make undo?

1 Answers