Redux-persist: expire date for reducers

[hcyildirim]

i have redux-persist setup in my index.ios.js and its working but my data coming from db so i dont want to persist this data for lifetime. i need your library :) But i could'nt figure it out how this library works so can someone help me? here is my code:

expire package ->

constructor(props) {
    super(props);

    this.state = {
      store: null,
      rehydrated: false,
    };
  }

  componentWillMount() {
    const expireTransform = createExpirationTransform({
      expireKey: 'customExpiresAt',
      defaultState: {},
    });

    this.setState({ store: configureStore() }, () => {
      persistStore(this.state.store, { transforms: [expireTransform], storage: AsyncStorage, blacklist: ['token'] }, () => {
        this.setState({ rehydrated: true });
      });
    });
  }

  render() {
    if (!this.state.rehydrated) return <Text>Loading...</Text>;
    return (
      <Provider store={this.state.store}>
        <App />
      </Provider>
    );
  }

After creating the expire transform, do I need to go to the reducer and add this key? Or need to make any changes in the reducers? Here is my reducer:

import {
  FETCHING_COMPANY_STATS_BY_YEAR_TO_DATE,
  FETCHING_COMPANY_STATS_BY_YEAR_TO_DATE_SUCCESS,
  FETCHING_COMPANY_STATS_BY_YEAR_TO_DATE_FAILURE,
} from '../../../../../actions/constants';

const initialState = {
  stats: [],
  isLoading: false,
  error: false,
};

export default function companyYearlyStatsReducer(state = initialState, action) {
  switch (action.type) {
    case FETCHING_COMPANY_STATS_BY_YEAR_TO_DATE:
      return {
        ...state,
        stats: [],
        isLoading: true,
      };
    case FETCHING_COMPANY_STATS_BY_YEAR_TO_DATE_SUCCESS:
      return {
        ...state,
        isLoading: false,
        stats: action.data,
      };
    case FETCHING_COMPANY_STATS_BY_YEAR_TO_DATE_FAILURE:
      return {
        ...state,
        isLoading: false,
        error: true,
      };
    default:
      return state;
  }
}

[hcyildirim]

nevermind, i figured it out.

[alshdotme]

What was your solution? Currently trying to integrate redux-persist-transform-expire myself without much luck so far, using v5 of redux-persist.

[hcyildirim]

I solved the problem by examining the source code of the package.

You need to add a key to the reducer where you want to use redux-persist. The default is 'persistExpiresAt', so I use it.

I use the moment package to set persistExpiresAt after 5 minutes.

Here is my reducer.

import moment from 'moment';

import {
  FETCHING_USER_BY_YEAR_TO_DATE,
  FETCHING_USER_BY_YEAR_TO_DATE_SUCCESS,
  FETCHING_USER_BY_YEAR_TO_DATE_FAILURE,
} from '../../../../../actions/constants';

const initialState = {
  payload: [],
  isLoading: false,
  error: false,
  persistExpiresAt: moment()
    .add(5, 'm')
    .format(),
};

I hope this helps you.

[alshdotme]

I ended up doing the same thing and also downgrading to v4 of redux-persist. The author of redux-persist-transform-expire is looking into implementing support for v5.

Thanks for getting back though!

[kamranahmedse]

I ended up publishing redux-persist-expire for the similar usecase. Have a look if it may help.

[nihlton]

i solved this with a couple utility functions, and a simple config like:

const reduxStorageWhiteList = [
  { key: 'user', lifeSpan: ONE_YEAR },
  { key: 'siteConfig', lifeSpan: ONE_DAY },
  { key: 'siteContent', lifeSpan: ONE_MINUTE * 5 }
]

I have a gist up here: https://gist.github.com/nihlton/b5a32b641eb84e115a7a137bc38780d9