Search code examples
reduxredux-devtools-extension

What does the "Persist state history" button do?


What does this "Persist state history" button do in redux devtools? Why would the state not always be "persisted"?

screenshot of redux devtools


Solution

  • This is pin button UI code:

    {features.persist &&
      <Button
        Icon={PersistIcon}
        onClick={togglePersist}
      >Persist</Button>
    }
    

    See v2.15.0/src/app/containers/App.js#L95

    features doc:

    const composeEnhancers = composeWithDevTools({
      features: {
        pause: true, // start/pause recording of dispatched actions
        lock: true, // lock/unlock dispatching actions and side effects    
        persist: true, // persist states on page reloading
        export: true, // export history of actions in a file
        import: 'custom', // import history of actions from a file
        jump: true, // jump back and forth (time travelling)
        skip: true, // skip (cancel) actions
        reorder: true, // drag and drop actions in the history list 
        dispatch: true, // dispatch custom actions or action creators
        test: true // generate tests for the selected actions
      },
      // other options like actionSanitizer, stateSanitizer
    });
    

    features.persist means persist states on page reloading.