Ist Redux tot? Warum ich Redux aus unserer SaaS-App verbannt habe

?Verbinden: https://www.subham.online

?Twitter: https://twitter.com/TheSubhamMaity

Vor ein paar Monaten habe ich den Schritt gewagt und Teile einer SaaS-App, an der ich schon seit einiger Zeit arbeite, überarbeitet. Wir hatten dort Redux, das sein Ding machte und den globalen Zustand verwaltete. Aber irgendetwas fühlte sich schief an – die Codebasis wurde umfangreicher und Redux fühlte sich langsam … schwer an. Weißt du, wenn du Sachen in deinem Rucksack mit dir herumträgst, die du seit Monaten nicht angerührt hast? So fühlte es sich an.
Aber mit dem Wachstum unserer App wuchs auch die Komplexität. Redux fühlte sich weniger wie eine Lösung, sondern mehr wie ein Problem an. Wir haben mehr Musterbeispiele als tatsächliche Logik geschrieben.

? Das Redux-Dilemma

Eines Tages, als ich mit einem weiteren Redux-bezogenen Fehler kämpfte, stieß ich auf React Query. Nach einiger Recherche bin ich auf React Query gestoßen. Ich habe viel darüber gehört, aber ich hätte nie gedacht, dass es Redux vollständig ersetzen könnte. Dann habe ich es versucht.

Vorher (mit Redux):

// Action
const fetchUserData = (userId) => async (dispatch) => {
  dispatch({ type: 'FETCH_USER_REQUEST' });
  try {
    const response = await api.fetchUser(userId);
    dispatch({ type: 'FETCH_USER_SUCCESS', payload: response.data });
  } catch (error) {
    dispatch({ type: 'FETCH_USER_FAILURE', error });
  }
};

// Reducer
const userReducer = (state = initialState, action) => {
  switch (action.type) {
    case 'FETCH_USER_REQUEST':
      return { ...state, loading: true };
    case 'FETCH_USER_SUCCESS':
      return { ...state, loading: false, data: action.payload };
    case 'FETCH_USER_FAILURE':
      return { ...state, loading: false, error: action.error };
    default:
      return state;
  }
};

// Component
const UserProfile = ({ userId, fetchUserData, userData, loading, error }) => {
  useEffect(() => {
    fetchUserData(userId);
  }, [userId]);

  if (loading) return <Spinner />;
  if (error) return <Error message={error.message} />;
  return <UserInfo user={userData} />;
};

const mapStateToProps = (state) => ({
  userData: state.user.data,
  loading: state.user.loading,
  error: state.user.error,
});

export default connect(mapStateToProps, { fetchUserData })(UserProfile);

Nachher (mit React Query):

const useUserData = (userId) => {
  return useQuery(['user', userId], () => api.fetchUser(userId));
};

const UserProfile = ({ userId }) => {
  const { data, isLoading, error } = useUserData(userId);

  if (isLoading) return <Spinner />;
  if (error) return <Error message={error.message} />;
  return <UserInfo user={data} />;
};

export default UserProfile;

Anstatt manuell Daten abzurufen, Reduzierer zu schreiben, Aktionen zu versenden und dann den Store zu aktualisieren, hat React Query den größten Teil dieser schweren Arbeit für uns erledigt. Kombinieren Sie das mit einigen gut gemachten benutzerdefinierten Hooks, und wir hatten eine schlanke, leistungsstarke Zustandsverwaltungsmaschine.

? Aber Moment, ist Redux überhaupt schlecht?

Verstehen Sie mich jetzt nicht falsch. Redux ist nicht der Schreckgespenst. Es ist ein leistungsstarkes Werkzeug, das seinen Platz hat. Wenn Sie eine App mit einem komplexen clientseitigen Status erstellen, der von vielen unabhängigen Komponenten gemeinsam genutzt werden muss, wenn Sie mit einem tief verschachtelten Status arbeiten oder wenn Sie eine explizitere Kontrolle über den Fluss Ihrer App benötigen, jedoch nicht für 90 In % der Fälle, insbesondere für die Handhabung des Serverstatus, sind benutzerdefinierte React Query-Hooks mehr als ausreichend.

Warum also die ganze Aufregung? Manchmal tappen wir als Entwickler in die Falle und verwenden das Vertraute, auch wenn es bessere Tools gibt. Das ist bei mir und Redux passiert. Ich blieb in meinen alten Gewohnheiten stecken und dachte, Redux sei die einzige Möglichkeit, den Status in größeren Apps zu verwalten. Ich meine, das ganze Internet sagte „Redux or Pleite!“ richtig?

? Der Plot Twist

Hier ist der Clou: Durch das Entfernen von Redux haben wir unsere App tatsächlich skalierbarer gemacht. Kontraintuitiv, oder? Aber denken Sie darüber nach – da React Query unseren Serverstatus verwaltet und benutzerdefinierte Hooks den lokalen Status verwalten, hatten wir eine klare Trennung der Bedenken. Jeder Teil unserer App wurde modularer und einfacher zu verstehen.

? Ist Redux tot?

Ehrlich gesagt habe ich in den letzten Monaten nur sehr wenige Fälle gesehen, in denen React Query meine Anforderungen nicht erfüllt hat.

Ist Redux also tot? Vielleicht nicht, aber es ist definitiv nicht mehr der All-Star, der es einmal war. Zur Handhabung des Serverstatus in modernen React-Apps

So, da haben Sie es. Unsere Reise von der Redux-Sucht zur Aufklärung über React Query. Es war nicht immer einfach – es gab Momente des Zweifels, nächtliche Debugging-Sitzungen und mehr als ein paar Facepalms. Aber am Ende hat es sich gelohnt.

Wenn Sie das Gefühl haben, dass Redux in Ihrer eigenen App nicht mehr funktioniert, empfehle ich Ihnen, einen Schritt zurückzutreten und sich zu fragen: Brauchen Sie es wirklich? Die Antwort könnte Sie überraschen.

Manchmal ist weniger mehr. Vor allem, wenn es um die Staatsführung geht. Wenn Sie mich jetzt entschuldigen würden, ich muss noch einige Reduzierungen löschen. Viel Spaß beim Codieren!

Das obige ist der detaillierte Inhalt vonIst Redux tot? Warum ich Redux aus unserer SaaS-App verbannt habe. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!