web-dev-qa-db-de.com

Funktion aufrufen, nachdem der Versand von redux abgeschlossen ist

Um alles herum, aber nicht ganz, da ich genug von redux-thunk und react-router habe, aber ich bekomme nicht diese scheinbar einfache Vorstellung von:

Rufen Sie eine Routenänderung programmgesteuert über <Route/>s history.Push('/') auf, nachdem das Senden einer Aktion an den Store abgeschlossen ist. Dies geschieht, wenn eine Taste gedrückt wird.

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

Laien-Erklärungen und Beispiele für alle Dinge, die ich erwähnt/markiert habe, wären ebenfalls schön

5
KellysOnTop23

Lassen Sie Ihren Aktionsschöpfer ein Versprechen zurückgeben. Auf diese Weise können Sie beim Aufruf von .then () und in Ihrem Handler dann eine neue Adresse in den Verlauf verschieben.

Thunks geben Funktionen normalerweise zurück, ein Versprechen unterscheidet sich jedoch darin, dass Sie nach Abschluss der Aktion handeln können.

Beispiel:

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

      resolve()
    }
  }
}

In diesem Fall gibt Ihr Thunk ein Versprechen zurück. Wenn du dann so aufrufst:

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

Dieser Thunk löst gerade eine Aktion aus, aber Sie könnten dort einen asynchronen Anruf haben, der einen Rückruf hat usw., und Sie lösen das Problem ab.

15
Hashibuto

Gemäß dieser stackoverflow-Antwort: Ist store.dispatch in Redux synchron oder asynchron , sind die redux-Dispatch-Funktionen synchron. Daher können Sie Folgendes tun:

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

Ich möchte diesen Abschnitt hier hervorheben ...

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

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

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

</Route>

Sie möchten Login und Push the history in das Stammverzeichnis der Anwendung aufrufen. Sie haben hier einige Optionen:

  1. rufen Sie die Funktion history.Push('/') in Ihrer Login-Funktion auf. Diese Funktion scheint innerhalb Ihrer Reduzierer AUTHENTICATE-Funktion zu liegen.

  2. eine Aktion auslösen, die history.Push nach erfolgreicher Authentifizierung aufruft siehe redux-promise oder redux-saga, redux-thunk ist etwas schwieriger, aber es ist möglich

Ich würde es im Moment nicht anders versuchen, da Sie auf das Login angewiesen sind (das über redux aufgerufen wird, ich möchte also die Logik dort behalten, auch wenn es sich um eine clientseitige Weiterleitung handelt).

0
Denis Tsoi

Ich hatte ähnliche Verwirrung und verbrachte ziemlich viel Zeit damit, das Problem durch Callbacks und Javascript-Versprechen zu lösen, was aufgrund des React-Redux-Setup überhaupt nicht erforderlich ist.

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

Ich habe versucht, zu meinem Dashboard zu gelangen, nachdem meine clearReducerState () - Funktion ausgelöst wurde .. Dieser Code funktioniert einwandfrei. 

Sie müssen nichts tun, als dass reaux redux auf eine synchrone Art und Weise funktioniert, also können Sie dies einfach tun. Sie können auch history.Push verwenden.

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

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

Und in deiner Handlung

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

Wenn Sie jedoch Ihren Status mithilfe von Reduzierern aktualisieren, sollten Sie history.Push in Ihrer Indexdatei verwenden, um Probleme zu vermeiden.

Verwenden Sie gemäß Ihrer Anforderung . Hoffe, dass dies hilft.

0
sareek