2017-04-06 3 views
12

Ich habe widersprüchliche (oder einfach nur verwirrende, für mich) Antworten in anderen Fragen gesehen, ob die Verwendung von getState innerhalb einer Aktion akzeptabel ist oder nicht, und ich habe schon einige Male gesehen, dass es ein Anti-Pattern genannt wird. Für mich scheint es gut zu funktionieren, aber was ist die beste Vorgehensweise dafür, wenn wir getState nicht verwenden sollen?Verwendet GetState in einem Redux Thunk-Verfahren?

Ich verwende getState in einem Thunk, um durch ein Array von Benutzern zu filtern, die derzeit mit einigen Scheindaten verbunden ist und in den Zustand der Anwendung gezogen wird. Hier

ist der Code für meine Aktion:

export const accountLogInSuccess = user => ({ 
    type: types.ACCOUNT_LOG_IN_SUCCESS, 
    user, 
}); 

export const accountLogOutSuccess =() => ({ 
    type: types.ACCOUNT_LOG_OUT_SUCCESS, 
}); 

export const accountCheckSuccess =() => ({ 
    type: types.ACCOUNT_CHECK_SUCCESS, 
}); 

export const accountCheck =() => (
    (dispatch, getState) => { 
     dispatch(ajaxCallBegin()); 
     return apiAccount.accountCheck().then((account) => { 
      if (account) { 
       const user = findByUID(getState().users, account.uid); 
       dispatch(accountLogInSuccess(user)); 
       toastr.success(`Welcome ${user.nameFirst}!`); 
      } else { 
       dispatch(accountLogOutSuccess()); 
      } 
      dispatch(accountCheckSuccess()); 
     }).catch((error) => { 
      dispatch(ajaxCallError(error)); 
      toastr.error(error.message); 
      throw (error); 
     }); 
    } 
); 

Und mein Minderer:

export default function reducerAccount(state = initial.account, action) { 
    switch (action.type) { 
    case types.ACCOUNT_LOG_IN_SUCCESS: 
     return Object.assign({}, state, action.user, { 
      authenticated: true, 
     }); 
    case types.ACCOUNT_LOG_OUT_SUCCESS: 
     return Object.assign({}, { 
      authenticated: false, 
     }); 
    case types.ACCOUNT_CHECK_SUCCESS: 
     return Object.assign({}, state, { 
      initialized: true, 
     }); 
    default: 
     return state; 
    } 
} 

Der Anfangszustand des Kontos in meinem Minderer verwendet wird, ist nur:

account: { 
    initialized: false, 
    authenticated: false, 
}, 

Die accountCheck Aktion übergibt den Benutzer (gefunden mit getState und findByUID Funktion) in accountLogInSuccess, wo der Reduzierer seine Werte zum aktuellen Kontostand über Object.assign hinzufügt.

Bevorzugen Sie nicht, den Benutzer an die Wurzel meiner Anwendung zu bringen und sie dann über Props weiterzugeben, was ist die beste Vorgehensweise, um dies innerhalb von Redux zu erreichen und die Benutzerdaten im Zustand verfügbar zu haben? Nochmals, die Verwendung von getState innerhalb der Thunk funktioniert gut für mich bisher, aber gibt es eine bessere Lösung für diese, die nicht als ein Anti-Pattern betrachtet wird?

Antwort

12

Ich schrieb eine erweiterte Blog-Post namens Idiomatic Redux: Thoughts on Thunks, Sagas, Abstraction, and Reusability, die dieses Thema im Detail behandelt. Darin reagiere ich auf mehrere Kritikpunkte von Thunks und Verwendung von getState (einschließlich Dan Abramovs Kommentare in Accessing Redux state in an action creator?). In der Tat wurde mein Beitrag speziell von Fragen wie Ihnen inspiriert.

Als eine TL, DR meiner Post: Ich glaube, Thunks sind ein voll funktionsfähiges Werkzeug für den Einsatz in Redux-Anwendungen, und ermutigen ihre Verwendung. Es gibt zwar einige berechtigte Bedenken bei der Verwendung von Thunks und Sagas und die Verwendung von getState/select in ihnen, aber diese Bedenken sollten Sie nicht davor abschrecken, Thunks zu verwenden.

Verwandte Themen