How to refresh username from the doc example

[standuprey]

I was looking at this example in wiretie documentation

const mapUserToProps = user => ({
    onChange(e) {
        user.setUsername(e.target.value)
    }
})
@wire('user', { username: 'getUsername' }, mapUserToProps)
class Username extends Component {
    render({ username, onChange }) {
        return <input value={username} onInput={onChange} />
    }
}

I just changed render a bit to see if the value refreshes

<div>
  <h1>{username}</h1>
  <input value={username} onInput={onChange} />
</div>

but it doesn't, what's the best way to have it refresh in this case?

[standuprey]

I figured one way to do it which I don't find particularly elegant, but it does the job:

const mapUserToProps = user => ({
    onChange(name) {
        return user.setUsername(name);
    }
})
@wire('user', { username: 'getUsername' }, mapUserToProps)
class Username extends Component {
  onChange = (e) => {
    this.props.onChange(e.target.value).then(() => {
      this.props.refresh();
    });
  };        
  render({ username, onChange }) {
      return (
        <div>
          <h1>{username}</h1>
          <input value={username} onInput={onChange} />
        </div>
      )
  }
}

[pl12133]

The refresh prop right now definitely isn't very elegant, so we had a short discussion in #3.

Any other ideas are welcome, I think we could move the discussion back over to #3 but if this is separate we can keep this open.

[pl12133]

I see that this is actually a separate issue, because you are trying to re-render in response to a change in state of the model. That is not something that wiretie can do: It never subscribes to anything, it only re-renders in response to props changing. Here the props are not changing, instead the state of the model is changing. This is a limitation of wiretie, but it is by design to avoid using subscriptions.

If you truly need to subscribe to state changes from the model, that is more likely to be a job for Flux/Redux.

Otherwise you can attempt to re-design your model to move the statefulness to a different part of your application, like in a Component where calling setState will cause a re-render.