Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Accessing persistor in unconnected part of app? #349

Open
FoxxMD opened this issue May 9, 2017 · 5 comments
Open

Accessing persistor in unconnected part of app? #349

FoxxMD opened this issue May 9, 2017 · 5 comments

Comments

@FoxxMD
Copy link

FoxxMD commented May 9, 2017

In my app I call persistStore when initializing store for the first time

// store.js
export default function configureStore(initialState = {}, history) {
...
const store = createStore(
    createReducer(),
    fromJS(initialState),
    composeEnhancers(...enhancers) // includes autoRehydrate
  );

const persistor = persistStore(store, { storage: localForage, whitelist: ['auth', 'support'] }, (a, b) => {
     console.log('Redux-Persist loaded state');
   });
...
return store;
}
// app.js
...
const initialState = {};
const store = configureStore(initialState, browserHistory);
const history = syncHistoryWithStore(browserHistory, store, {
 selectLocationState: makeSelectLocationState(),
});
...
const render = (messages) => {
 ReactDOM.render(
   <Provider store={store}>
     <LocaleProvider locale={enUS}>
       <Router
         history={history}
         routes={createRoutes(store)}
         render={
            applyRouterMiddleware(useScroll())
          }
       />
     
     </LocaleProvider>
   </Provider>,
    document.getElementById('app')
  );
};

Because I need REHYDRATE to fire so I can get stored user auth info and skip login, etc.

If there is no user auth info (IE user is logged out) I would like to do something similar to #253 and call persistor.pause() if the user has not checked "remember me" when they login.

However in the documentation I don't see a clear way to access persistor after it's initially created. How can I do this? Does it require recreating my entire store using the current store as initial state? just so i can get another persistor?

@Viral-Inc
Copy link

Viral-Inc commented May 14, 2017

I'm basically wondering the same thing / having a hard time ):
edit: i used context.store and it worked

@FoxxMD
Copy link
Author

FoxxMD commented May 17, 2017

@Viral-Inc can you expand on that please? Right now I'm setting the persistor as a global variable on window and it feels shameful.

@Viral-Inc
Copy link

@FoxxMD me using context is kind of shameful too, but, basically I declared store as a contextType on a Purge class component:

import React, {Component} from 'react'
import {persistStore} from 'redux-persist'
import './purge.css'
import PropTypes from 'prop-types'

class Purge extends Component {

  handleSubmit = (e) => {
    e.preventDefault();
    persistStore(this.context.store).purge()
  };

  render() {
    return (
      <div id="pur-d1a">
        <div id="pur-d2a">
          <form onSubmit={this.handleSubmit}>
            <input type="submit" value="purge"/>
          </form>
        </div>
      </div>
    )
  };
}

Purge.contextTypes = {
  store: PropTypes.object
};

export default Purge

@hugows
Copy link

hugows commented Oct 23, 2017

Me too. Any tips?

@rt2zz
Copy link
Owner

rt2zz commented Oct 24, 2017

couple of options:

  1. if your config is statically defined, you can use purgeStoredState as follows
import { purgeStoredState } from 'redux-persist'
import { persistConfig } from 'somewhere you defined it'

// ...

purgeStoredState(persistConfig)
  1. expose persistor via context, much like react-redux does for store

I would recommend option 1 when possible

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

4 participants