Redux 简单路由器 pushPath 不更新 URL答案

【问题标题】：Redux Simple Router pushPath not updating URLRedux 简单路由器 pushPath 不更新 URL
【发布时间】：2015-12-27 09:31:59
【问题描述】：

我将 redux-simple-router 移植到了样板 react/redux 同构套件 (https://github.com/erikras/react-redux-universal-hot-example)。我有一个简单的单击事件处理程序，它从 redux-simple-router 调用“pushPath”。但是，pushPath 似乎没有更新我的 URL。我已经实现了初始端口（syncReduxAndRouter），其他路由似乎工作正常（其他路由使用 updatePath）。我还需要做些什么才能使其正常工作吗？

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>
    );
  }
}

这是我的代码修复版本。我需要使用一个连接到 store 的 redux-simple-router 实例，然后将其方法作为 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>
    );
  }
}

【问题讨论】：

为什么不使用组件？

标签： reactjs redux react-router-redux

【解决方案1】：

您正在调用动作创建者pushPath 而不是绑定方法。

动作创建者只返回普通对象。要调用绑定方法，你应该这样做

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

@connect 创建适当的调度方法并通过 props 将其传播给您。

【讨论】：