我正在尝试修改react-router-redux的示例代码。 https://github.com/rackt/react-router-redux/blob/master/examples/basic/components/Home.js
这是我的Home.js
class Home extends Component {
onSubmit(props) {
this.props.routeActions.push('/foo');
}
}
我也有mapDispatchToProps。
function mapDispatchToProps(dispatch){
return bindActionCreators({ routeActions },dispatch);
}
当我调用onSubmit函数时,我收到错误
Uncaught TypeError: this.props.routeActions.push is not a function
如果我在onSubmit中删除this.props,则URL中的键已更改,但它仍在同一页面上。
从localhost:8080/#/?_k=iwio19
到localhost:8080/#/?_k=ldn1ew
任何人都知道如何修复它? 欣赏它。
答案 0 :(得分:9)
我不认为routeActions
被传递为props
。你想要做的是:
import { routeActions } from 'react-router-redux'
this.props.dispatch(routeActions.push('/foo'));
答案 1 :(得分:9)
在评论中提供一个更明确的答案和我自己的问题的答案。
是的,你可以做到
import { routeActions } from 'react-router-redux'
this.props.dispatch(routeActions.push('/foo));
但是正如我所提到的,mapDispatchToProps会覆盖它。 要解决此问题,您可以像这样绑定routeActions:
import { bindActionCreators } from 'redux'
import { routeActions } from 'react-router-redux'
function mapDispatchToProps(dispatch) {
return {
routeActions: bindActionCreators(routeActions, dispatch),
}
}
export default connect(null, mapDispatchToProps)(YourComponent)
现在你可以:this.props.routeActions.push('/foo')
仅供参考,这可以做得更整洁
function mapDispatchToProps(dispatch) {
return {
...bindActions({routeActions, anotherAction}, dispatch)
}
}
答案 2 :(得分:7)
至于react-router-redux v4:
import { push } from 'react-router-redux';
export class ExampleContainer extends React.Component {
static propTypes = {
changeRoute: React.PropTypes.func,
};
function mapDispatchToProps(dispatch) {
return {
changeRoute: (url) => dispatch(push(url)),
dispatch,
};
}
}
export default connect(null, mapDispatchToProps)(ExampleContainer);
然后:
this.props.changeRoute('/foo');
答案 3 :(得分:5)
我能够通过这样做来实现它
import { connect } from 'react-redux'
import { bindActionCreators } from 'redux'
import { routeActions } from 'react-router-redux'
export const Cmpt = React.createClass({ //code })
function mapDispatchToProps(dispatch) {
return bindActionCreators({
push: routeActions.push,
//all your other action creators here
}, dispatch)
}
export const CmptContainer = connect({}, mapDispatchToProps)(Cmpt)
然后你可以使用push via props
this.props.push('some/cool/route')
答案 4 :(得分:1)
对于这些示例,我会像这样讨论mapDispatchToProps函数:
<强> bindActionDispatchers.js 强>
NSOrderedDescending
<强> Foo.js 强>
import { bindActionCreators } from 'redux'
/** curries mapDispatchToProps with bindActionCreators to simplify React action dispatchers. */
export default function bindActionDispatchers(actionCreators) {
if(typeof actionCreators === 'function')
return (dispatch, ownProps) => bindActionCreators(actionCreators(ownProps), dispatch)
return dispatch => bindActionCreators(actionCreators, dispatch)
}
我把它打包成一个轻量级的npm包bind-action-dispatchers,包含单元测试和健全性检查。要使用此版本安装:
<强> import React from 'react'
import bindActionDispatchers from './bindActionDispatchers'
import { routeActions } from 'react-router-redux'
import * as appActions from './actions'
const Foo = ({ routeActions ...appActions }) => (
<div>
<button onClick={routeActions.push('/route')}>Route</button>
<button onClick={appActions.hello('world')}>Hello</button>
</div>
)
export default connect(null, bindActionDispatchers({ routeActions, ...appActions }))(Foo)
强>
并导入函数:
<强> npm i -S bind-action-dispatchers
强>