React-SPA: best practice, um mit Aktionen nach einer Action umzugehen?

[Christian Kruse]

Moin zusammen,

ich schreibe gerade an einer SPA in React. Dort habe ich Aktionen, die weitere Aktionen nach sich ziehen können. Zum Beispiel: der User erstellt ein Objekt. Nach der erfolgreichen Erstellung möchte ich ihn vom Formular weiterleiten an z.B. die neu erzeugte Ressource. Zur Zeit verwende ich dazu den Promise-Mechanismus über redux-thunk:

function createFoo(foo) {
  return dispatch => {
    return axios.post("/foos", { foo })
      .then(
        result => dispatch(createFooSuccess(result)),
        error => dispatch(createFooFailure(error))
      );
  }
}

// …

class FooForm extends React.Component {
  onSave = () => {
    this.props.createFoo(this.state.values).then(() => {
      this.props.history.push("/foos");
      this.props.addSuccessFlash("Foo wurde erfolgreich gespeichert");
    });
  }

  // …
}

Diese Verfahrensweise funktioniert eigentlich ganz gut, sie hält die Actions klein und sorgt so dafür, dass ich sie an anderen Stellen wiederverwenden kann.

Leider gibt es aber auch das Problem, dass ich Fehler, die von der API kommen, nicht mitbekomme. Das durch Redux-Thunk zurück gegebene Promise läuft nie in den Catch-Fall, es löst nur immer die then-Aktion aus.

Was ist denn hier der Best-Practice-Weg, um damit umzugehen?

Ich könnte natürlich auch meine Redirections und dergleichen in die Actions verlagern und damit die Business-Logik komplett raushalten aus meinen Components… leider fehlt mir da noch etwas die Erfahrung um sagen zu können, was denn der Weg mit den wenigsten Nachteilen ist, um mit diesem Problem umzugehen.

LG,
CK

P.S. wie „man“ das in Perl macht interessiert mich nicht.