7

我正在尝试修改 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

谁知道怎么修它？欣赏它。

4

5 回答 5

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)
    }
}
于 2016-02-05T15:37:20.877 回答
9

我不认为routeActions被传递为props. 你想要做的是：

import { routeActions } from 'react-router-redux'

this.props.dispatch(routeActions.push('/foo'));
于 2016-02-04T14:37:41.147 回答
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');
于 2016-09-09T09:14:31.447 回答
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)

然后你可以通过道具使用推送 this.props.push('some/cool/route')

于 2016-02-06T15:51:14.517 回答
1

更简洁

对于这些示例，我会像这样对 mapDispatchToProps 函数进行 curry：

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'

于 2016-05-28T03:11:34.053 回答