Wie ungültigen Zustand in redux Minderer behandeln

Question

Ich habe eine Aktion, die ausgelöst wird, wenn ein Benutzer anhängig einzuloggen versucht und wird die Anfrage noch:

function signinRequestReducer(state, action) { 
    if (action.type === "SIGNIN_REQUEST") { 
     state = {signingIn: true}; 
    } 
    return state; 
} 

Doch was passiert, wenn diese zweimal ausgelöst wird (aufgrund eines Fehler an anderer Stelle im Code). Sollte der Reduzierer die zweite Aktion ignorieren (und eine reine Funktion bleiben), sollte er einen Fehler (und nicht mehr eine reine Funktion) oder etwas anderes werfen?

function signinRequestReducer(state, action) { 
    if (action.type === "SIGNIN_REQUEST") { 
     if (state.signingIn) { 
      // Option 1 
      return state; 
      // Option 2 
      raise new Error("Can not sign in whilst pending previous attempt."); 
      // Option 3 ... ? 
     } 
     state = {signingIn: true}; 
    } 
    return state; 
} 

** bearbeiten **

Zur Zeit ich einen Fehler bin anmelden.

if (action.type === "SIGNIN_REQUEST") { 
    if (state.signingIn) { 
     console.error("Can not sign in whilst pending previous attempt."); 
     // return state; // only return early if it's really not possible to set the new state. 
    } 
    ... 

Das ist nicht eine reine Funktion, aber es erlaubt es:

• der Fehler in der Entwicklung und Produktion zu beobachten.
• sollten die ungültigen Status/abgesendeten Aktionen weiterhin zulassen, dass die App funktioniert, kann sie dies weiterhin tun.

** bearbeiten 2 **

Dan Abramov suggested einen Fehler zu werfen.

Answer 1

Einen Fehler protokollieren.

if (action.type === "SIGNIN_REQUEST") { 
    if (state.signingIn) { 
     console.error("Can not sign in whilst pending previous attempt."); 
     // return state; // only return early if it's really not possible to set the new state. 
    } 
    ... 

Das ist nicht eine reine Funktion, aber es erlaubt es:

• der Fehler in der Entwicklung und Produktion zu beobachten.
• sollten die ungültigen Status/abgesendeten Aktionen weiterhin zulassen, dass die App funktioniert, kann sie dies weiterhin tun.

Dan Abramov schlug vor, einen Fehler zu werfen.

Answer 2

Erstens, ist es in diesem Beispiel etwas schaden, einfach die Aktion zweimal auftreten zu lassen? Alles was passieren wird ist signingIn wird wieder auf true gesetzt, was nicht wie das Schlimmste aussieht, was passieren kann.

Es gibt definitiv Zeiten, in denen Duplikate nicht durchkommen wollen, also setze ich die Antwort fort.

---

Wenn es darum geht Aktionen zu duplizieren, ziehe ich die Aktionen zu verhindern, dass überhaupt geschickt werden, anstatt diese in den Minderer Schluck. Im Allgemeinen sind es asynchrone Aktionen, wie etwa api-Anfragen, die wir vor dieser Art von Verhalten schützen wollen, und dieser Ansatz hält nicht nur an, dass der Zustand mehrmals aktualisiert wird, sondern stoppt auch die eigentliche Arbeit zweimal . Die Verwendung einer asynchronen Middleware, wie beispielsweise redux-thunk oder redux-saga, kann einige nützliche Werkzeuge bereitstellen, um dies zu tun.

In redux-thunk gibt es einen zweiten Parameter für den Thunk, mit dem Sie den Zugriff auf den Status überprüfen können. Wenn Sie, wie in Ihrem Beispiel, ein Flag in dem Zustand setzen, bevor die asynchrone Anfrage beginnt, können Sie die Option verwenden, um aus dem Thunk herauszukommen, bevor die zweite Aktion das Ereignis gestartet wird.

const signIn = (/* your parameters here */) => (dispatch, getState) => { 
    if (getState().path.to.signingIn) { 
    // console.error or throw Error here if you prefer 
    return; 
    } 

    dispatch({ type: 'SIGNIN_REQUEST' }); 

    // do sign in 
} 

Hinweis: redux-Thunk kann auch auf diese Weise für Synchronaktionen verwendet wird (in der Tat, das ist, was ich in meinem Beispiel).

Ich bin nicht sehr vertraut mit Redux-Saga, aber es scheint ein pretty standard pattern for only taking the first action zu sein.