reagieren, wie Router in redux-saga zu navigieren?

Question

Version: "reagieren-Router-dom": "^ 4.1.2", "reagieren-Router-Redux": "^ 5.0.0-alpha.8",

i-Router erfolgreich navigieren kann in meinem Komponente, die durch diese Art und Weise:

this.props.history.push('/cart') 

dann habe ich versucht, navigieren möchte Router in meinem saga.js, ich einige Möglichkeiten, und sie alle nicht funktioniert:

const history = createHistory(); 



yield call(history.push, '/cart') 
yield call(put('/cart)//react-router-redux 
history.push('/cart') 

diese Weise die uRL ändern können, aber die Seite würde nicht rendern. Ich füge die Seitenkomponente withRouter hinzu, und es funktioniert auch nicht. kann mir jemand helfen, danke!

hier ist meine einige Einstellungen:

const render = Component => 
    ReactDOM.render(
     <Provider store={store}> 
     <AppContainer> 
      <Component /> 
     </AppContainer> 
     </Provider> 
    , 
    document.getElementById('root') 
); 

class App extends Component { 

    render() { 
    return (
     <ConnectedRouter history={history}> 
     <div> 
      <Header/> 
      <Nav/> 
      <ScrollToTop> 
      <Route render={({location}) => (
       <ReactCSSTransitionGroup 
       transitionName="fade" 
       transitionEnterTimeout={300} 
       transitionLeaveTimeout={300}> 
       <div key={location.pathname} className="body"> 
        <Route location={location} exact path="/" component={HomePageContainer}/> 
        <the other component> 
        ..... 
       </div> 
       </ReactCSSTransitionGroup>)}/> 
      </ScrollToTop> 
      <Footer/> 
     </div> 
     </ConnectedRouter> 
    ) 
    } 
} 

================================= ==========================

Ich habe dieses Problem auf diese Weise behoben: Benutzer Router anstelle von BroswerRouter, und dann

history.push('/somerouter') 

Answer 1

können Sie push Methode von react-router-redux verwenden. Zum Beispiel:

import { push } from "react-router-redux"; 

yield put(push('/')); /* inside saga regenrator function*/ 

Answer 2

können Sie browserHistory von react-router verwenden.

import { browserHistory } from "react-router"; 

yield browserHistory.push("/"); //put the path of the page you want to navigate to instead of "/" 

Answer 3

Ich habe eine einfache Lösung gefunden. Versenden Sie die Push-Funktion, die sich in der Komponente befindet, zur Saga.

class App extends Component { 
    foo =() => { 
     const { dispatch } = this.props; 

     dispatch({ 
      type: 'ADD_USER_REQUEST', 
      push: this.props.history.push <<-- HERE 
     }); 
    } 

    render() { ... } 
} 

Innerhalb der Saga, benutzen Sie einfach die Push wie folgt aus:

function* addUser(action) { 
    try { 
     yield put(action.push('/users')); 

    } catch (e) { 
     // code here... 
    } 
}