Define engine key at `load()` time rather than `createEngine()`? #140

New issue

Closed

opened 2016-05-30 20:42:50 +00:00 by elliottsj · 2 comments

elliottsj commented

2016-05-30 20:42:50 +00:00

(Migrated from github.com)

I'm running into a situation where I need to define the engine's save key after creating the redux store. I have a web app which serves different content for different 'shortcodes', i.e. example.com/<shortcode>, and I'm persisting only shortcode-specific state slices via redux-storage. In order to prevent different shortcodes' persistent state from conflicting, I'd like to use a different engine key for each shortcode.

For example, if I have /shortcodeA and /shortcodeB, and each shortcode has its own unique state.widgets slice, I want to be able to load & save shortcodeA's state.widgets using an engine key 'shortcodeA' so it doesn't conflict with shortcodeB's state under a 'shortcodeB' engine key.

Is this something that could be supported by redux-storage? Maybe the API could look something like

const load = storage.createLoader(engine);
// ...
load({
  key: 'my-save-key',
  // ... more engine options
}, store);

I'm going to play around with a few options and make a PR; anyone have any thoughts on how this should work?

I'm running into a situation where I need to define the engine's save key _after_ creating the redux store. I have a web app which serves different content for different 'shortcodes', i.e. `example.com/<shortcode>`, and I'm persisting only shortcode-specific state slices via redux-storage. In order to prevent different shortcodes' persistent state from conflicting, I'd like to use a different engine key for each shortcode. For example, if I have `/shortcodeA` and `/shortcodeB`, and each shortcode has its own unique `state.widgets` slice, I want to be able to load & save shortcodeA's `state.widgets` using an engine key `'shortcodeA'` so it doesn't conflict with shortcodeB's state under a `'shortcodeB'` engine key. Is this something that could be supported by redux-storage? Maybe the API could look something like ``` js const load = storage.createLoader(engine); // ... load({ key: 'my-save-key', // ... more engine options }, store); ``` I'm going to play around with a few options and make a PR; anyone have any thoughts on how this should work?

michaelcontento commented

2016-06-08 13:36:47 +00:00

(Migrated from github.com)

redux-storage is heavily built towards redux and it's sematics / behaviour. So how do you switch the redux between those shortcodes? Is there a default case (e.g. no data loaded) and how is it handled? Or let me go through this in a few steps:

IMHO it's a good practice to have a sane redux default state for all your reducers and I'm assuming this is the case, right?
So the next thing I assume is that you app works well behaved if there is no data to be loaded besides the initial state, right?
And after all that is set you want to load the right shortcode data for the given page, right?

So why can't you use the right shortcode while creating the initial redux-storage engine?

`redux-storage` is heavily built towards `redux` and it's sematics / behaviour. So how do you switch the `redux` between those `shortcodes`? Is there a default case (e.g. no data loaded) and how is it handled? Or let me go through this in a few steps: 1. IMHO it's a good practice to have a sane redux default state for all your reducers and I'm assuming this is the case, right? 2. So the next thing I assume is that you app works well behaved if there is no data to be loaded besides the initial state, right? 3. And after all that is set you want to load the right `shortcode` data for the given page, right? So why can't you use the right `shortcode` while creating the initial `redux-storage` engine?

elliottsj commented

2016-06-09 22:49:01 +00:00

(Migrated from github.com)

My original reasoning for this change was that, while I can easily access the shortcode via window.location when constructing the store, I wanted to read URL params only via react-router (to be consistent about how I read URL params). My original root render call rendered something like this:

<div className="provider-container">
  <Provider store={store}>
    <div>
      <Router history={history}>
        <Route path="/">
          <IndexRoute component={NoShortcodeError} />
          <Route
            path=":shortcode"
            component={StorageLoaderContainer}
            loadStorage={loadStorage}
          >
            {/* ... */}
          </Route>
        </Route>
      </Router>
    </div>
  </Provider>
</div>

However I realized that I don't actually need to construct the store up front; I can instead just create it in a component once react-router determines the shortcode. So now I have this:

<Router history={history}>
  <Route path="/">
    <IndexRoute component={NoShortcodeError} />
    <Route
      path=":shortcode"
      component={AppContainer}
    >
      {/* ... */}
    </Route>
  </Route>
</Router>

AppContainer constructs the store in componentWillMount (with access to shortcode to use as the engine key), then calls this.setState({ store, loadStorage }) and renders

<Provider store={store}>
  <StorageLoaderContainer loadStorage={loadStorage}>
    {children}
  </StorageLoaderContainer>
</Provider>

Long story short: I no longer need to define the engine key at load() time, so I think this can be closed 😄

My original reasoning for this change was that, while I can easily access the shortcode via `window.location` when constructing the store, I wanted to read URL params only via react-router (to be consistent about how I read URL params). My original root `render` call rendered something like this: ``` jsx <div className="provider-container"> <Provider store={store}> <div> <Router history={history}> <Route path="/"> <IndexRoute component={NoShortcodeError} /> <Route path=":shortcode" component={StorageLoaderContainer} loadStorage={loadStorage} > {/* ... */} </Route> </Route> </Router> </div> </Provider> </div> ``` However I realized that I don't actually need to construct the store up front; I can instead just create it in a component once react-router determines the shortcode. So now I have this: ``` jsx <Router history={history}> <Route path="/"> <IndexRoute component={NoShortcodeError} /> <Route path=":shortcode" component={AppContainer} > {/* ... */} </Route> </Route> </Router> ``` `AppContainer` constructs the store in `componentWillMount` (with access to `shortcode` to use as the engine key), then calls `this.setState({ store, loadStorage })` and renders ``` jsx <Provider store={store}> <StorageLoaderContainer loadStorage={loadStorage}> {children} </StorageLoaderContainer> </Provider> ``` --- Long story short: I no longer need to define the engine key at `load()` time, so I think this can be closed 😄

This discussion has been locked. Commenting is limited to contributors.