Modifying store prop triggers render, but modified value doesn't persist

[alex-wilmer]

I am finding the behaviour to be rather inconsistent, and I think it may have something to do with react-router. I have store variables that when modified, trigger render with the modified values and my views do the right thing, but in some cases that I have not quite pinned down the reason, render gets called but the values in the store don't change. The following is an example of this

Here's my store:

export default class {
  @observable loggedIn = auth.loggedIn()
}

export let connect = Store => Composed =>
  class extends Component {
    render() {
      return <Composed { ...this.props } $ = { new Store() } />
    }
  }

Root component passed to react-router

@connect(Store)
@observer
export default class App extends Component {
  logout = () => {
    this.context.router.replace(`/`)
    this.props.$.loggedIn = false
    console.log('logout', this.props.$.loggedIn) // onClick triggers this first and logs false
  };

  render() {
    let children = Children.map(this.props.children, child => {
      return cloneElement(child, {
        ...child.props,
        ...this.props,
        logout: this.logout,
      })
    })
    console.log('render', this.props.$.loggedIn) // true
    return <div>{ children }</div>
  }
}

...and lastly child component with click method:

export default observer(({
  $,
  logout,
}) =>
  <div>
    { $.loggedIn &&
    <div>
      <a onClick={ logout }>Log out</a>
    </div>
    }
  </div>
)

Most of the time everything works.. .but this does not! Everytime I click logout, the loggedIn observable logs false, triggers render, and inside render remains true

[alex-wilmer]

If it's not clear from my question, I'd be willing to make a repo to demonstrate this behaviour.

[mweststrate]

Hi @alex-wilmer I think I miss some context indeed, so a repo would be appreciated! I could imagine that disabling the line this.context.router.replace("/") might make a difference? Note that rendering in react doesn't happen (always) synchronously (in the same tick), so other actions might be triggered between the logout call and the render. Maybe a route is triggered that tries to login automatically? Maybe that helps, and otherwise feel free to share a repo :).

[mweststrate]

Closing this issue for inactivity, feel free to re-open.