web-dev-qa-db-ja.com

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へ

誰かがそれを修正する方法を知っていますか？感謝します。

reactjsreact-routerreact-router-redux
7
JAckWang

routeActionsがpropsとして渡されるとは思いません。あなたがしたいことはこれです：

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

this.props.dispatch(routeActions.Push('/foo'));
9
jjordy

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');
7
quotesBro

これを行うことでそれを機能させることができました

_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')

5
Ryan Irilli

より簡潔に

これらの例では、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'

1
cchamberlain