web-dev-qa-db-fra.com

Appelez la fonction après la fin de l'envoi depuis redux

Tout autour, mais pas tout à fait, car j'en ai assez des idées sur redux-thunk et sur react-router, mais je n'ai pas cette idée apparemment simple de:

Appelez un changement de route par programme via la history.Push('/') de <Route/> après la distribution d'une action au magasin, ceci se produisant lorsqu'un bouton est enfoncé.

const LoggerRedux = ({stateProp, LogIn}) => {
    return(
      <div>
        <h2>Here is the button. Use this to login</h2>
        <Route render={({ history}) => (
          <button
            type='button'
            onClick={

            //Something that calls {LogIn}
            //and then the history.Push('/')

            }
            >
            Log yo Arse Inn
          </button>
        )}>

        </Route>
      </div>
    )
}

const mapStateToProps = (state) => {
  return {
    stateProp : state
  }
}
const mapDispatchToProps = (dispatch) => {
  return {
    LogIn : () => dispatch({
      type : 'AUTHENTICATE'
    }),
    LogOut : (bool) => dispatch({
      type : 'LOGGED_OUT',
      bool
    })
  }
}
const LoginConn = connect( mapStateToProps, mapDispatchToProps)(LoggerRedux);

Des explications et des exemples de la part de Layman de toutes les choses que j'ai mentionnées/étiquetées seraient également utiles.

reactjsreduxreact-routerreact-reduxredux-thunk
5
KellysOnTop23

Demandez à votre créateur d'action de retourner une promesse. Ainsi, lorsque vous l'invoquez, vous pouvez utiliser .then () et dans votre gestionnaire d'alors, vous pouvez envoyer une nouvelle adresse à l'historique.

Thunks retournera les fonctions normalement, mais une promesse diffère en ce que vous pouvez agir après l'achèvement.

Exemple:

static yourActionCreator(somevar) {
  return dispatch => {
    return new Promise((resolve, reject) => {
      dispatch({
        type: "myaction",
        something: somevar
      });

      resolve()
    }
  }
}

Donc, dans ce cas, votre thunk renvoie une promesse. Ensuite, quand vous appelez comme ceci:

this.props.myActionCreator(myvar)
.then(() => {
  this.props.history.Push('/winning')
})

Ce thunk envoie juste une action, mais vous pouvez avoir un appel asynchrone avec un rappel, etc. et que vous résolvez à la fin.

15
Hashibuto

Selon cette réponse stackoverflow: store.dispatch est-il synchrone ou asynchrone , les fonctions de redux dispatch sont-elles synchrones, vous pouvez donc procéder comme suit:

LogIn();
history.Push("/");
0
Josan Iracheta

Je veux souligner cette section ici ...

<Route render={({ history}) => (
  <button
    type='button'
    onClick={

    //Something that calls {LogIn}
    //and then the history.Push('/')

    }
    >
    Log yo Arse Inn
  </button>
)}>

</Route>

Vous voulez appeler Login et pousser l'historique à la racine de l'application . Vous avez deux options ici:

  1. appelez la fonction history.Push('/') dans votre fonction de connexion, cela semble être dans votre fonction réducteur AUTHENTICATE.

  2. envoie une action qui appelle history.Push après une authentification réussie regardez redux-promise ou redux-saga, redux-thunk est un peu plus difficile à faire, mais c'est possible

Je n'essaierais pas de le faire autrement pour le moment car vous êtes dépendant de la connexion (appelée via redux, je souhaite donc conserver la logique, même s'il s'agit d'une redirection côté client).

0
Denis Tsoi

J'ai eu une confusion similaire et j'ai fini par passer un bon moment à résoudre le problème par des rappels et des promesses javascript, ce qui n'est pas du tout nécessaire en raison de la configuration de react-redux.

this.props.clearReducersState()
this.props.history.Push('/dashboard')

J'essayais d'accéder à mon tableau de bord après la distribution de ma fonction clearReducerState () . Ce code fonctionne parfaitement. 

Vous n'avez rien à faire. React-redux fonctionne de manière synchrone, vous pouvez donc le faire simplement . Vous pouvez utiliser history.Push dans votre action aussi pour cela,

import { withRouter } from 'react-router-dom';
this.props.clearReducersState(this.props.history)

export default connect(mapStateToProps, mapDispatchToProps)(withRouter(UpdateAid))

Et dans ton action,

export const clearReducersState = (history) => dispatch => {
history.Push('/dashboard')
}

Toutefois, si vous mettez à jour votre état à l'aide de réducteurs, il est préférable d'utiliser history.Push dans votre fichier d'index pour éviter les problèmes.

Utilisez selon vos besoins ... Espérons que cela aide.

0
sareek