redux-persist-transform-expire
redux-persist-transform-expire copied to clipboard
gabceb
Update for v5 of Redux-Persist
I was wondering if this library was going to be/is compatible with redux-persist v5? I've downgraded to v4 for now.
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.
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)
~~@gabceb Sorry to bug you on this, but have you had any progress?~~ Nvm, it's pretty straightforward to make your own transformers :)
@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 š
@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.
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.
