Bind via Lifecycle

Bind via Subscribe/unsubscribe

This means to just subscribe/unsubscribe the store in the componentDidMount and componentWillUnmount member functions. When subscribing the store you select which fields of the stores state go into which fields of the components state.

private subscription: Rx.Subscription = null;

public componentDidMount() {
    // subscribe to store (e.g. from props) instances state 
    this.subscription = this.props.store.subscribe(state => {
        this.setState({
            ...this.state,
            // set any state properties from the stores state
        });
    });
}

public componentWillUnmount() {
    // unsubscribe if component is unmounted
    if (this.subscription) {
        this.subscription.unsubscribe();
        this.subscription = null;
    }
}

Bind via StoreSubscription

This is in principle the same as above but slightly more convenient using the class StoreSubscription from the rfluxx package. In addition it is simpler to handle edge cases when updating props.

private subscription = new StoreSubscription<IMyStore, IMyStoreState>();

public componentDidMount() {
    this.subscribe();
}

public componentDidUpdate(prevProps) {
    // StoreSubscription does the following so this works
    // - only resubscribes if store is different
    // - automatically unsubscribes the old store
    this.subscribe();
}

public componentWillUnmount() {
    this.subscription.unsubscribe();
}

private subscribe() {
    // subscribe to store (e.g. from props) instances state 
    this.subscription.subscribeStore(this.props.store, state => {
        this.setState({
            ...this.state,
            // set any state properties from the stores state
        });
    });
}