CODEWITHSUNDEEP
javascriptreactjsecmascript-6reduxstate
JJ23
JJ23

Reputation: 111

Revert changes in redux store

I've got a simple question.

Now in my App Redux I've got one combined store, and when I fetch data It is set as a part of state.

Then, I've got a React editor which manages state through Redux. When user click on Edit, all the fields become editable. He can mess arround, and after that click on 'Discard' button and get back to initial state of fetched data.

I was trying doing deepcopy of orginal fetched data (after user modify It), but after that I've got proper data in my store, but view still shows the modyfined one (It is connected by te react-redux to the store).

So, my question is, how to do that proper way that the view will show this data. Below is my reducer of editor.

case editorActions.DISCARD_CHANGES:
  return {
    ...state,
    editing: false,
    data: {
      ...state.data,
      ...mapGistToData(payload)
    }
  };

And I pass to It original data like that:

onDiscardClick={discardChanges.bind(null, orginalGist)}

Which comes from 

orginal: deepcopy(payload),

Upvotes: 3

Views: 712

Answers (1)

Cesar Ho
Cesar Ho

Reputation: 183

Assume the data are stored in "data" in the state.

Call the actionCreator, by passing the original data from deepcopy during the initial setup.

discardChange(original);

ActionCreator:

export function discardChange(originalData) {
  return {
    type: DISCARD_CHANGES,
    payload: originalData
  }
}

Reducer:

case editorActions.DISCARD_CHANGES:
  return {
    ...state,
    editing: false,
    data: editorActions.payload
  };

Upvotes: 2

Related Questions