如何使用 react-router-redux routeActions?
How to use react-router-redux routeActions?
我正在尝试修改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
有人知道怎么解决吗?
欣赏一下。
我不认为 routeActions
被传递为 props
。你想要做的是:
import { routeActions } from 'react-router-redux'
this.props.dispatch(routeActions.push('/foo'));
在评论中提供更明确的答案和我自己的问题的答案。
是的,你可以
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)
}
}
我可以通过这样做让它工作
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)
然后就可以通过props使用push了
this.props.push('some/cool/route')
更简洁
对于这些示例,我会像这样柯里化 mapDispatchToProps 函数:
bindActionDispatchers.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)
}
Foo.js
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 包 bind-action-dispatchers 完成了单元测试和健全性检查。要使用此版本安装:
npm i -S bind-action-dispatchers
并导入函数:
import bindActionDispatchers from 'bind-action-dispatchers'
至于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');
我正在尝试修改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
有人知道怎么解决吗? 欣赏一下。
我不认为 routeActions
被传递为 props
。你想要做的是:
import { routeActions } from 'react-router-redux'
this.props.dispatch(routeActions.push('/foo'));
在评论中提供更明确的答案和我自己的问题的答案。
是的,你可以
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)
}
}
我可以通过这样做让它工作
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)
然后就可以通过props使用push了
this.props.push('some/cool/route')
更简洁
对于这些示例,我会像这样柯里化 mapDispatchToProps 函数:
bindActionDispatchers.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)
}
Foo.js
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 包 bind-action-dispatchers 完成了单元测试和健全性检查。要使用此版本安装:
npm i -S bind-action-dispatchers
并导入函数:
import bindActionDispatchers from 'bind-action-dispatchers'
至于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');