Subscribe to values in Store from anywhere

[quandhz]

In the Component itself

Say in my BookPage component, I have a value call selectedBook:

import resaga from 'resaga';

// BookPage.js
export class BookPage extends PureComponent {
  
  handleSelectBook = (selectedBook) =>
    this.props.resaga.setValue({ selectedBook });
    // now the value we set with `resaga.setValue` will be 
    // automatically injected into `this.props`
    // resaga will trigger re-render every time the value has been updated

  handleSomething = () => {
    const { selectedBook } = this.props;
    // .. do something with selectedBook
  }

  render = () => {
    // previous API, still available for backward compatibility
    // const selectedBook = this.props.resaga.getValue('selectedBook');
  
    // new API
    const { selectedBook } = this.props;
  
  // render something
  }
}
BookPage.propTypes = {
  selectedBook: PropTypes.number,
}
BookPage.defaultProps = {
  selectedBook: -1,
}

const CONFIG = {
  name: 'BookPage',
  requests: {
    // .. some requests
  }
};
export default resaga(CONFIG)(BookPage);

Now the value we set with resaga.setValue will be automatically injected into this.props
resaga will trigger re-render every time the value has been updated.
The behaviour is pretty similar to setState

From other Component

In my other component, namely Card, I can subscribe to the selectedBook's value from BookPage

import resaga from 'resaga';

// Card.js
export class Card extends PureComponent {
  // this.props.selectedBook is ready to use as long as it's declared in `CONFIG.value`
}
Card.propTypes = {
  selectedBook: PropTypes.number,
}
Card.defaultProps = {
  selectedBook: -1,
}

const CONFIG = {
  value: {
    selectedBook: ['BookPage', 'selectedBook'],
  },
};
export default resaga(CONFIG)(Card);

Card component will re-render everytime selectedBook has been updated.

[quandhz]

Resolved in #58