web-dev-qa-db-fra.com

Comment utiliser react-router-redux routeActions?

J'essaie de modifier l'exemple de code de react-router-redux. https://github.com/rackt/react-router-redux/blob/master/examples/basic/components/Home.js

c'est mon Home.js

class Home extends Component {
    onSubmit(props) {
        this.props.routeActions.Push('/foo');    
    }
}

J'ai aussi un mapDispatchToProps pour cela.

function mapDispatchToProps(dispatch){
    return bindActionCreators({ routeActions },dispatch);
}

Quand j'ai appelé la fonction onSubmit, j'ai eu une erreur

Uncaught TypeError: this.props.routeActions.Push is not a function

Si je supprime this.props dans onSubmit, la clé de l'URL a changé mais reste toujours sur la même page. De localhost:8080/#/?_k=iwio19 à localhost:8080/#/?_k=ldn1ew

Quelqu'un sait comment réparer ça? L'apprécier.

reactjsreact-routerreact-router-redux
7
JAckWang

Je ne pense pas que routeActions soit passé comme props. Ce que vous voulez faire est ceci:

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

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

Pour fournir une réponse un peu plus explicite et la réponse à ma propre question dans le commentaire.

Oui tu peux faire 

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

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

Cependant, comme je l’ai mentionné, mapDispatchToProps remplacera ceci. Pour résoudre ce problème, vous pouvez lier les routeActions comme suit:

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

function mapDispatchToProps(dispatch) {
    return {
        routeActions: bindActionCreators(routeActions, dispatch),
    }
}

export default connect(null, mapDispatchToProps)(YourComponent)

Maintenant, vous pouvez faire: this.props.routeActions.Push('/foo')

Juste pour votre information, cela peut être fait encore mieux

function mapDispatchToProps(dispatch) {
    return {
        ...bindActions({routeActions, anotherAction}, dispatch)
    }
}
9
Michiel

Quant à 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);

puis:

this.props.changeRoute('/foo');
7
quotesBro

J'ai pu le faire fonctionner en faisant cela

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)

Ensuite, vous pouvez utiliser les accessoires Push via this.props.Push('some/cool/route')

5
Ryan Irilli

Plus concise

Pour ces exemples, je voudrais curry la fonction mapDispatchToProps comme suit:

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)

Je l'ai intégrée dans un paquet npm léger bind-action-dispatchers complète avec des tests unitaires et des vérifications de sécurité. Pour utiliser cette version, installez avec:

npm i -S bind-action-dispatchers

et importer la fonction avec:

import bindActionDispatchers from 'bind-action-dispatchers'

1
cchamberlain