我将redux-simple-router移植到样板react / redux同构套件(https://github.com/erikras/react-redux-universal-hot-example)中。我有一个简单的点击事件处理程序,可以调用' pushPath'来自redux-simple-router。但是,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>
);
}
}
这是我修复代码的版本。我需要使用连接到商店的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>
);
}
}
答案 0 :(得分:3)
您正在调用操作创建者pushPath
而不是绑定方法。
动作创建者只返回普通对象。要调用绑定方法,您应该
handleClick(value) {
this.props.pushValue('/Links/' + value);
}
@connect
创建适当的方法,通过道具调度并传播给你。