webentwicklung-frage-antwort-db.com.de

Wie verwende ich React-Router-Redux RouteActions?

Ich versuche, den Beispielcode von React-Router-Redux zu ändern. https://github.com/rackt/react-router-redux/blob/master/examples/basic/components/Home.js

das ist meine Home.js

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

Ich habe auch ein mapDispatchToProps dafür.

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

Als ich die Funktion onSubmit aufgerufen habe, ist ein Fehler aufgetreten

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

Wenn ich this.props in onSubmit entferne, hat sich der Schlüssel in der URL geändert, aber er befindet sich immer noch auf derselben Seite. Vom localhost:8080/#/?_k=iwio19 zum localhost:8080/#/?_k=ldn1ew

Weiß jemand, wie man es repariert? Bin dankbar.

reactjsreact-routerreact-router-redux
7
JAckWang

Ich glaube nicht, dass routeActions als props übergeben wird. Was Sie wollen, ist folgendes:

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

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

Um eine etwas explizitere Antwort und die Antwort auf meine eigene Frage im Kommentar zu geben.

Ja kannst du tun 

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

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

Wie bereits erwähnt, überschreibt mapDispatchToProps dies. Um dies zu beheben, können Sie die routeActions wie folgt binden:

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

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

export default connect(null, mapDispatchToProps)(YourComponent)

Jetzt können Sie: this.props.routeActions.Push('/foo')

Nur zu Ihrer Information, dies kann sogar noch schöner gemacht werden

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

Wie für den reakt-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);

dann:

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

Ich konnte es auf diese Weise zum Laufen bringen

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)

Dann können Sie Push über Requisiten this.props.Push('some/cool/route') verwenden.

5
Ryan Irilli

Prägnanter

Für diese Beispiele würde ich die mapDispatchToProps-Funktion wie folgt ausführen:

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)

Ich packte dies in ein leichtes npm-Paket bind-action-Dispatcher mit Unit-Tests und Sanitätsprüfungen. So verwenden Sie diese Version mit:

npm i -S bind-action-dispatchers

und importiere die Funktion mit:

import bindActionDispatchers from 'bind-action-dispatchers'

1
cchamberlain