Redux Simple Router - Change state AND URL

Question

Say I have some logic where the user has a list of options to choose from. When the user chooses an option, the app state and URL should reflect this choice. I have the URL routing figured out, but I wanted to be aware of the best strategy. Do I want use redux-simple-router pushPath AND dispatch an action? Does redux-simple-router have an API to change the state of the app directly through a route? Or would I handle the app state change somewhere else? Code is below:

    handleClick(value) {
        this.props.pushPath('/Options/' + value);
    }

    render() {
      return (
        <div className="container">
          <div>Search bar here</div>
           <div className={styles.tile_container}>
             {this.state.options.map(option =>
               <div name= {option.name} key={option.key}  onClick={this.handleClick.bind(this, option.name)}>{option.name}</div>
           )}
         </div>
      </div>
    );
  }

Answer 1

The way I think about it, the path is just a coarse reflection of the UI state of the app. The structure of the UI triggers from the path, via React Router, but the state should be in Redux. I should be able to recover the UI state by typing in the same path, and the path should change in recognition of major changes of UI state.

So basically, you want to change the router when you want to set a "checkpoint" or reconfigure your layout, but you still need to dispatch actions to change the state of the Redux store.