Moving builder and condition into a "use" hook (maybe useBlocBuilder) for react-bloc

[theweiweiway]

Moving builder and condition into a "use" hook (maybe useBlocBuilder) for react-bloc

[theweiweiway]

Hey Felix,

This might be over my head, but I'll look through the code and try to give it a shot!

[felangel]

Hey Felix,

This might be over my head, but I'll look through the code and try to give it a shot!

No worries at all! If you have any questions don't hesitate to ask and again if you prefer to wait that's totally fine as well 👍

[felangel]

Hi @theweiweiway 👋
Thanks for opening an issue!

I agree that your proposal is more "react-like" and would be a lot more familiar to the existing react community while still preserving the core concepts/behavior of the bloc library.

Unfortunately, I'm focusing on migrating the dart bloc ecosystem to null safety right now but if you're willing to give this a shot, I'm always happy to review the code 👍

If you're busy/prefer not to work on the implementation, no worries! I'll try to get to this in the coming weeks 😄

[theweiweiway]

Hey @felangel, I've got something that kind of looks like a useBlocBuilder hook - but I think I'm missing a few things which is preventing it from working properly. I've been modelling this hook off of your <BlocBuilder /> component - I have a few questions though.

Here's your <BlocBuilder /> component. I've added comments in to explain what I think the code is doing. Can you let me know if my understanding is correct? For now, I'm omitting previous state and condition and only focusing on the core streaming functionality. I've also added some questions in the code

  private subscribe(): void {
    this.subscription = this.bloc.listen((state: S) => {
      let rebuild: boolean =
        this.condition !== null ? this.condition.call(this, this.previousState, state) : true

      if (rebuild) {
        // this setState updates the state that is being emitted.
        // this also causes componentDidUpdate to fire 
        // which will update ensure we are listening to
        // the most updated version of the bloc
        this.setState({ blocState: state })
      }
      this.previousState = state
    })
  }

  private unsubscribe(): void {
    this.subscription.unsubscribe()
  }

  componentDidUpdate(prevProps: BlocBuilderProps<B, S>): void {
    // every time there is a `blocState` change, we need to update
    // this.bloc so that it has the most recent version of the bloc.
    // The most recent version of the bloc is always `props.bloc`! (is 
    // this assumption actually correct?)
    if (prevProps.bloc !== this.props.bloc) {
      this.unsubscribe()
      // update this.bloc with most updated version of the bloc
      this.bloc = this.props.bloc
      this.previousState = this.bloc.state

      // not 100% sure why we are setStating here. Didn't the
      // setState in the subscribe function already bring us to most
      // updated state? 
      this.setState({ blocState: this.bloc.state })

      // now we resubscribe, which will listen to the most
      // updated version of the bloc
      this.subscribe()
    }
  }

OK - Thanks Felix!

[theweiweiway]

Closing due to PR #40