State not changed in component props but has changed in the store.

I have run into an issue where I am updating the redux store via a reducer, but the app’s copy of the state is not updated. See these shots below:

Has anyone else seen this before? Any ideas where I can look for the issue?

The code is very simple at this point, just connecting props as follows:

export default (hash) => {
  
  const mapStateToProps = (state: Object) => ({
    navigatable: state.modal.navigatable
  })

  const mapDispatchToProps = (dispatch: Dispatch) => ({
    toggleNavigability() {
      dispatch(toggleNavigability())
    }
  })

  return [
    connect(mapStateToProps, mapDispatchToProps),
    lifecycle({
      componentDidMount() {
        $(hash)
          .modal({
            detachable: false,
            onHidden: () => {
              if (this.props.navigatable) {
                this.props.history.goBack()
              }
              this.props.toggleNavigability()
              return true
            }
          })
          .modal('show')
      },
      componentWillUnmount() {
        if (this.props.navigatable) {
          this.props.toggleNavigability()
          $(hash).modal('hide')
        } else {
          this.props.toggleNavigability()
        }
      }
    })
  ]
}

[timdorr]

You have to wrap your component in withRouter when you use connect.

[Panoplos]

That was the answer to what I was looking for but didn’t actually solve the problem. LOL My assumption that redux state would be reflected in the component props after componentWillUnmount() was wrong… Thanks for the help, anyway.