Update for v5 of Redux-Persist

[alshdotme]

I was wondering if this library was going to be/is compatible with redux-persist v5? I've downgraded to v4 for now.

[ChenLi0830]

+1 for supporting v5.

[gabceb]

I’m taking a look into v5

[gediminastub]

How's the progress going? Thank You for such a wonderful library!

[hcyildirim]

Is there any improvement? 😞

[nikosolihin]

+1 for v5

[leonardosul]

I'm not sure if this needs to up be updated to work with V5 of redux persist. I have been using redux-persist v5.9.1 with the latest version of redux-persist-transform-expire successfully.

My config looks like this:

import ReactDOM from 'react-dom';
import { applyMiddleware, createStore, compose } from "redux";
import thunk from "redux-thunk";
import promise from "redux-promise-middleware";
import reducer from "./reducers";
import { Provider } from 'react-redux';
import { BrowserRouter as Router } from 'react-router-dom';
import {persistStore, persistReducer} from "redux-persist";
import { PersistGate } from 'redux-persist/integration/react';
import autoMergeLevel2 from 'redux-persist/lib/stateReconciler/autoMergeLevel2';
import createExpirationTransform from "redux-persist-transform-expire";
import localForage from "localforage";
import config from "./config";
import App from './App';

// Redux persist config.
const expireTransform = createExpirationTransform({
  expireKey: 'persistExpiresAt',
  defaultState: {}
});
const persistConfig = {
  key: 'root',
  storage: localForage,
  stateReconciler: autoMergeLevel2,
  whitelist: [
    "crypto"
  ],
  transforms: [expireTransform]
};

// Create our store
const middlewares = [];
let middleware;
middlewares.push(thunk);
middlewares.push(promise());
middleware = compose(applyMiddleware(...middlewares));

// Persist the store.
const persistedReducer = persistReducer(persistConfig, reducer);
const store = createStore(persistedReducer, middleware);
const persistor = persistStore(store);

// Where to render the react app.
const root = document.getElementById('root');

ReactDOM.render(
  <Provider store={store}>
    <PersistGate loading={null} persistor={persistor}>
      <Router>
        <App />
      </Router>
    </PersistGate>
  </Provider>,
  root
);

The creator of redux-persist has stated that there is no reason that this library should stop working because of the V5 release: https://github.com/rt2zz/redux-persist/issues/508#issuecomment-341584246

If you are still having trouble let me know what is broken and I will try to submit a patch.

[gabceb]

Hi everyone! Apologies for the radio silence but I've been a bit busy on the work side. If anyone wants to put a PR together I'll be happy to merge. Otherwise, I'll try to pick this up next week. If you don't hear from me feel free to keep pinging me so I don't forget (but will try not to)

[adamtay]

+1 for v5 compatibility

[pekq]

@gabceb Sorry to bug you on this, but have you had any progress? Nvm, it's pretty straightforward to make your own transformers :)

[leonardosul]

@pekq @adamtay This transform is V5 compatible. Have a look at my comment above. Using a similar config you can use this with V5. If you are still having issues after using my configuration let me know the specifics in this issue thread 👍

[appjitsu]

@leonardosul can you please share your reducer that has persistExpiresAt in it?

What I am trying to accomplish is to treat my auth reducer, which has a jwt token, as a session. I'd like to expire the "session" after say 30 minutes, detect that change and redirect the user to the login view.

[leonardosul]

Hey @appjitsu, this is what my reducer looked like for this particular use case:

import moment from "moment";
import {
  START_FETCH_OPTIONS,
  FETCH_OPTIONS_SUCCESS,
  FETCH_OPTIONS_FAILURE
} from "../actions/CryptoActions";

export default function reducer(state={
  isLoading: false,
  optionsList: {
    coinmarketcap_usd: [],
  },
  persistExpiresAt: moment()
    .add(5, 'm')
    .format(),
}, action) {

  switch (action.type) {
    case START_FETCH_OPTIONS: {
      return {
        ...state,
        isLoading: true,
      }
    }
    case FETCH_OPTIONS_SUCCESS: {
      return {
        ...state,
        optionsList: {
          ...state.optionsList,
          [action.cryptoOptionsId]: action.optionsList
        },
        isLoading: false
      }
    }
    case FETCH_OPTIONS_FAILURE: {
      return {
        ...state,
        isLoading: false,
      }
    }
    default:
      return state;
  }
}

I'm using moment.js to set the data to expire in 5 mins from "now". If you use a similar pattern but add 30 mins from now like this .add(30, 'm') you should be able to get what you need out of this transformer.

[kamranahmedse]

I ended up making/publishing my own transformer for my use case. Have a look if it helps anyone.