This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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 | |
}) | |
} | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment