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