0

My tech lead has given me a challenge to engineer a way only load only parts of the store that is needed for the UI that is loaded in a single page application. This is a big data application so that is why this is important. The idea is that entire store does not need to be loaded because the amount of data.

Amen Ra
  • 2,843
  • 8
  • 47
  • 85
  • 1
    Look into [reduxjs/reselect](https://github.com/reduxjs/reselect), it does precisely what you need to only select the data you need in a composable way. – Alexander Staroselsky Oct 12 '18 at 18:01

2 Answers2

3

I implemented similar recently and found How to dynamically load reducers for code splitting in a Redux application? which features a link to http://nicolasgallagher.com/redux-modules-and-code-splitting/ where Nicolas describes how they did it at Twitter.

TL;DR You want lazy-loaded reducers for this. The approach described there is to have a class as a "reducer-registry". You register your reducer/s when you need to use it/them. The registry then calls a listener with a combined reducer which includes all the currently registered reducers. You attach a listener to the registry which calls replaceReducer on your store to update it's reducer.

My implementation is here.. https://github.com/lecstor/redux-helpers/blob/master/src/reducer-registry.ts

lecstor
  • 5,619
  • 21
  • 27
0

In your mapStateToProps you can select the keys of the redux store you need in your component.

For eg.

function mapStateToProps(state) {
  const { key1, key2 } = state;
  const {subKey, ...restKeys} = key1;

  return {
    remainder: ...restKeys,
    subKey,
    key2,
  };
}

Now this data can be accessed in the component with this.props.remainder or this.props.subKey or this.props.key2

jagzviruz
  • 1,453
  • 12
  • 27
  • the `state` is a reference to the entire redux-store, and usually you would select one key from that store for your component. You can use this approach, if you need to access to data more that one keys within your component. – jagzviruz Oct 12 '18 at 17:59