Redux Simple Router pushPath not updating URL

Question

I ported redux-simple-router into a boilerplate react/redux isomorphic kit (https://github.com/erikras/react-redux-universal-hot-example). I have a simple click event handler that calls 'pushPath' from redux-simple-router. However, pushPath doesn't seem to update my URL. I already implemented the initial port (syncReduxAndRouter) and other routes seem to work fine (other routes use updatePath). Is there something else I need to do to get this to work?

import React, {Component} from 'react';
import { pushPath } from 'redux-simple-router';
import {connect} from 'react-redux';

@connect(null,
  { pushPath })
export default class MyContainer extends Component {
  constructor() {
    super();
this.state = { links: [{key: 0, name: 'Link1'}, {key: 1, name: 'Link2'}, {key: 2, name: 'Link3'}] };
  }
 // pass in redux actions as props

  handleClick(value) {
    pushPath('/Links/' + value);
  }

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

Here's the version of my code with the fix. I needed to use an instance of redux-simple-router that was connected to the store and then pass its methods to the component as a prop.

import React, {Component, PropTypes} from 'react';
import { pushPath } from 'redux-simple-router';
import {connect} from 'react-redux';

@connect(null,
  { pushPath })
export default class MyComponent extends Component {

 static propTypes = {
    pushPath: PropTypes.func.isRequired
  };
  constructor() {
    super();
    this.state = { links: [{key: 0, name: 'Link1'}, {key: 1, name: 'Link2'}, {key: 2, name: 'Link3'}] };
  }
 // pass in redux actions as props

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

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

score 3 · Accepted Answer · answered Dec 27 '15 at 13:42

You are calling action creator pushPath instead of the bound method.

Action creator just returns plain object. To call bound method, you should do

handleClick(value) {
   this.props.pushValue('/Links/' + value);
}

@connect create proper methods for dispatching and propagate it to you via props.

Redux Simple Router pushPath not updating URL

1 Answers1