GovernRedux.js

import * as Govern from 'govern'

/**
 * This component subscribes to a Redux store, outputting its current state.
 * 
 * Typically, you'll use this component as an element in another component's
 * `subscribe()` method. For example:
 * 
 * ```js
 * class Identity extends Govern.Component {
 *   subscribe() {
 *     return {
 *       reduxState: <Redux store={this.props.reduxStore} />
 *     }
 *   }
 *   
 *   publish() {
 *     // Both actions and state can be published
 *     return {
 *       identity: this.subs.reduxState.identity,
 *       login: this.login,
 *     }
 *   }
 * 
 *   shouldComponentUpdate(prevProps, prevState, prevSubs) {
 *     // Don't publish changes to irrelevant parts of the store.
 *     return prevSubs.reduxState.identity !== this.subs.reduxState.identity
 *   }
 * 
 *   login = (details) => {
 *     // Actions can be defined by calling out to the redux store's
 *     // dispatch method.
 *     this.props.reduxStore.dispatch(loginActionCreator(details))
 *   }
 * }
 * ```
 */
export class Redux extends Govern.Component {
  constructor(props) {
    super(props)

    this.state = {
      value: props.store.getState()
    }

    this.unsubscribe = this.props.store.subscribe(this.handleChange)
  }

  componentWillBeDisposed() {
    this.unsubscribe()
  }

  publish() {
    return this.state.value
  }

  handleChange = (value) => {
    this.setState({
      value
    })
  }
}