Redux-réaction route poussée v4/v5() ne fonctionne pas à l'intérieur thunk l'action

Question

En index.js pousser directement ou expédition throw fonctionne bien:

... 
 
import { push } from 'react-router-redux' 
 

 
const browserHistory = createBrowserHistory() 
 
export const store = createStore(
 
    rootReducer, 
 
    applyMiddleware(thunkMiddleware, routerMiddleware(browserHistory)) 
 
) 
 
// in v5 this line is deprecated 
 
export const history = syncHistoryWithStore(browserHistory, store) 
 

 
history.push('/any') // works well 
 
store.dispatch(push('/any')) // works well 
 

 
ReactDOM.render((
 
    <Provider store={store}> 
 
    <Router history={history}> 
 
     <App /> 
 
    </Router> 
 
    </Provider> 
 
), document.getElementById('root'))

App.js

class App extends Component { 
 
    render() { 
 
    return (
 
     <div className="app"> 
 
     <Switch> 
 
      <Route path="/" component={Main} /> 
 
      <Route path="/any" component={Any} /> 
 
     </Switch> 
 
     </div> 
 
    ); 
 
    } 
 
} 
 
export default withRouter(connect(/*...*/)(App))

mais dans l'action redux-thunk toutes les tentatives se termine par la réécriture url, mais sans re-rendu

... 
 
export function myAction(){ 
 
    return (dispatch) => { 
 
    // fetch something and then I want to redirect... 
 
    history.push('/any') // change url but not re-render 
 
    dispatch(push('/any')) // change url but not re-render 
 
    store.dispatch(push('/any')) // change url but not re-render 
 
    } 
 
}

Cette myAction appelle fetch() à l'intérieur et devrait rediriger après le succès.

Si je cours this.props.history.push('/any') à l'intérieur du composant, cela fonctionne! mais je dois courir rediriger l'intérieur action thunk après succès fetch()

Je tentais envelopper tous les composants avec withRouter ou Route, mais n'a pas aidé.

Answer 1

Injecter objet history dans votre composant et de l'utilisation poussée comme ceci:

import { withRouter } from 'react-router-dom' 
import { connect } from 'react-redux' 

@withRouter 
@connect(({auth})=>({auth})) 
class App extends Component { 

    // on redux state change 
    componentWillReceiveProps(nextProps) { 
    if(!nextProps.auth) 
     this.props.history.push('/login') 
    } 

    render() { 
    return (
     <div> 
     <Button 
      // on button click 
      onClick={this.props.history.push('/')} 
     > 
      Home page 
     </Button> 
     </div> 
    ); 
    } 
} 

Answer 2

J'ai fait contourner le problème en déléguant état de Successfull fetch() au composant (de @oklas thanks) où est history.push() ou <Redirect> travail:

{this.props.fetchSuccessfull && <Redirect to="/any" />} 

Mais toujours en attente d'une meilleure solution en appelant push() directement à partir de l'action thunk.