Statusverwaltung in Reactjs: Ein Leitfaden zur Auswahl des richtigen Statusverwaltungstools für Ihre Projekte

Zustandsverwaltung ist in React-Anwendungen von entscheidender Bedeutung, da sie dabei hilft, den Überblick über Anwendungsdaten zu behalten. Da die Benutzeroberfläche (UI) eine Funktion des Status ist, ist es wichtig sicherzustellen, dass der Status Ihrer Anwendung immer aktuell ist. In diesem Artikel erfahren Sie, wie Sie das richtige Statusverwaltungstool für Ihre Anwendungsanforderungen auswählen.

Hinweis: Dieser Artikel richtet sich an Entwickler, die bereits über einige Kenntnisse zu React verfügen, aber basierend auf der Statusverwaltung bessere Entscheidungen für ihre React-Anwendungen treffen möchten. Wenn Sie noch nicht wissen, wie Sie reagieren, schauen Sie sich die Dokumente an, um mit dem Lernen zu beginnen.

Staat und Staatsmanagement verstehen.

Basierend auf den oben genannten Voraussetzungen verfügen Sie wahrscheinlich bereits über einige Kenntnisse über React. Aber lasst uns unser Gedächtnis ein wenig auffrischen.

Was ist Staat?

State in React ist der Speicher einer Komponente, der spezifische Informationen für diese Komponente enthält. In der Programmiersprache ist „State“ ein JavaScript-Objekt, das lediglich Daten zu einer Komponente enthält.

Wie bereits erwähnt, wird die Benutzeroberfläche in React direkt vom Status beeinflusst. Zustandsänderungen treten hauptsächlich aufgrund von Benutzerinteraktionen wie Tastenklicks, Mausereignissen, Eingabeaktionen und mehr auf. Daher ist die Verwaltung des Status in unseren Anwendungen von entscheidender Bedeutung, um sicherzustellen, dass Benutzer basierend auf ihren Interaktionen die aktuellste Benutzeroberfläche auf ihrem Bildschirm erleben.

Staatsmanagement in Reaktion.

Wenn sich der Status einer React-Komponente ändert, führt dies dazu, dass die Komponente erneut gerendert wird. Dabei wird die Komponente hinter den Kulissen zerstört und von Grund auf neu aufgebaut.

Bei den meisten React-Anwendungen kommt es zu zahlreichen Statusaktualisierungen, wenn Benutzer mit der App interagieren. Es ist wichtig, die beste Zustandsverwaltungstechnik zu verwenden, um die Benutzererfahrung zu verbessern; Schließlich ist die Nutzung einer nicht reagierenden App nicht verlockend. Stellen Sie sich vor, Sie klicken in Ihrer Instagram-App auf den „Gefällt mir“-Button und die App reagiert nicht. Ärgerlich, oder?

Lassen Sie uns ohne weitere Umschweife in die verschiedenen Statusverwaltungsoptionen eintauchen, die Sie für Ihr Projekt erkunden können, und erklären, wann und warum Sie jede einzelne benötigen.

Verschiedene Statusverwaltungsoptionen in React.

Es stehen viele Optionen für die Zustandsverwaltung zur Verfügung, aber in diesem Artikel werden wir einige der am häufigsten verwendeten Optionen behandeln, die Anwendungen aller Größen, von klein bis extrem groß, abdecken. Zu den Optionen, die wir besprechen werden, gehören:

• Eingebaute React-Hooks
• Kontext-API
• Bibliotheken von Drittanbietern

Integrierte React-Hooks für die Statusverwaltung

React bietet integrierte Hooks für die Zustandsverwaltung mit Funktionskomponenten. Diese Haken sind einfach zu verwenden und eignen sich perfekt für die lokale Staatsverwaltung.

Lokaler Zustand ist der Zustand, der nur von einer Komponente benötigt wird und keine andere Komponente beeinflusst.

Globaler Zustand ist der Zustand, der von mehreren Komponenten benötigt wird, und wir werden später in diesem Artikel auch darauf eingehen, wie man ihn verwaltet.

useState Hook

Natürlich sind Funktionskomponenten zustandslos, aber React hat den useState-Hook eingeführt, um Entwicklern das Hinzufügen von Zustandsvariablen zu Komponenten zu ermöglichen, die sie benötigen.

Dieser Hook wird auf der obersten Ebene Ihrer Komponente mit einem übergebenen Anfangszustandswert aufgerufen und gibt ein Array des aktuellen Werts und eine Setter-Funktion zurück. Hier ist ein Codebeispiel, wie Sie es verwenden können:

import { useState} from 'react';

function Counter() {
  const [count, setCount] = useState(0);

  return (
    dc6dce4a544fdca2df29d5ac0ea9906b
      e388a4556c0f65e1904146cc1a846beeYou clicked {count} times94b3e26ee717c64999d7867364b1b4a3
      5ddc0978355752d4bf828563dc007a14 setCount(count + 1)}>
        Click me
      65281c5ac262bf6d81768915a4a77ac0
    16b28748ea4df4d9c2150843fecfba68
  );
}

Erklärung

• Die anfängliche Zählung beginnt bei 0
• Die Funktion „Zähler festlegen“ wird jedes Mal aufgerufen, wenn auf die Schaltfläche geklickt wird, wodurch die Zählvariable jederzeit mit dem aktuellsten Wert aktualisiert wird.

Wann sollte der useState-Hook verwendet werden?

Der useState-Hook eignet sich ideal zum Verwalten des Status Ihrer Komponenten, wenn:

• Lokale Statusverwaltung: Der Status wird nur innerhalb einer einzelnen Komponente benötigt und muss nicht von mehreren Komponenten gemeinsam genutzt werden.
• Einfache Zustandslogik: Die Zustandslogik ist unkompliziert, z. B. das Umschalten von Werten, Zählern, Formulareingaben und einfache Bedingungen.
• Begrenzte Komponentenhierarchie: Der Zustand muss nicht tief durch mehrere Schichten von Komponenten geleitet werden, was zu Propellerbohrungen führen kann.
• Kleine Projekte: Die Anwendung hat keine umfangreichen Anforderungen an die Zustandsverwaltung, die fortgeschrittenere Lösungen erfordern.

Beispiele:

• Managing form input values.
• Toggling UI elements (e.g., show/hide).
• Simple counters and trackers.

The useState hook provides a simple and efficient way to handle state for these scenarios, ensuring your components remain manageable and easy to understand.

useReducer Hook

The useReducer hook was introduced by the React team to handle complex state logic or case-sensitive updates. Here are the key parameters you need to keep in mind while using useReducer:

1. reducer: This is the function where all the state updating code is executed. It takes the current state and an action as arguments and returns a new state.
2. initialArg: This is the initial state that you declare from the onset.
3. dispatch: This is the function called in the event handler. It is returned from the useReducer hook and is used to send actions to the reducer.
4. state: This is the current state value also returned by the useReducer hook.

Here’s a code example of how to use this hook:

import React, { useReducer } from 'react';

const initialState = { count: 0 };

function reducer(state, action) {
  switch (action.type) {
    case 'increment':
      return { count: state.count + 1 };
    case 'decrement':
      return { count: state.count - 1 };
    default:
      throw new Error();
  }
}

function Counter() {
  const [state, dispatch] = useReducer(reducer, initialState);

  return (
    dc6dce4a544fdca2df29d5ac0ea9906b
      e388a4556c0f65e1904146cc1a846beeCount: {state.count}94b3e26ee717c64999d7867364b1b4a3
      5ddc0978355752d4bf828563dc007a14 dispatch({ type: 'increment' })}>
        +
      65281c5ac262bf6d81768915a4a77ac0
      5ddc0978355752d4bf828563dc007a14 dispatch({ type: 'decrement' })}>
        -
      65281c5ac262bf6d81768915a4a77ac0
    16b28748ea4df4d9c2150843fecfba68
  );
}

Key Takeaways:

1. Just like every other hook, useReducer must be called at the top level of the component.
2. Every time the dispatch function is called, it triggers the reducer, leading to a state update depending on the action. This causes the component to re-render, maintaining the goal of keeping the UI and the current state in sync.
3. You should only specify the action type in the dispatch function and a payload if need be.

When to Use the useReducer Hook

The useReducer hook is ideal for managing state in your components when:

• Complex State Logic: The state logic is complex, involves multiple sub-values, or the next state depends on the previous state.
• State Transition Management: When you need to handle multiple state transitions based on different actions.

Examples of Projects that Require useReducer

• Complex forms: A multi-step form in a registration process.Each step of the form collects different data, and the state needs to be managed for all steps, with validation and submission logic.

• Advanced to-do-list: A to-do list application with features like adding, removing, editing, and filtering tasks.

• E-commerce cart management: An e-commerce site with a shopping cart that handles adding, removing, and updating item quantities.

State Management with Context API

The previously discussed options are great, but they come with a downside: the problem of prop drilling. Prop drilling occurs when a state needs to be passed down through multiple nested components from a parent to a child. This can lead to verbose and hard-to-maintain code, as each intermediary component needs to explicitly pass the state or function down the tree.Global state, which is the state needed by multiple components, becomes particularly challenging to manage with prop drilling.

To solve this problem, React introduced the Context API, which is used for managing global state. The Context API allows you to create a context object that can be accessed by any component within its provider, eliminating the need to pass props through intermediate components.

How to Use the Context API

Here’s a step-by-step guide on how to use it:

1. Create a Context: First, create a context using the createContext function. This creates an object with a Provider and a Consumer.
   

   import React, { createContext } from 'react';
   const MyContext = createContext();
   

2. Provide Context Value: Wrap the components that need access to the context with the Provider component. Pass the value you want to share as a prop to the Provider.
   

   function App() {
    const [state, setState] = useState("Hello, World!");
    return (
      <MyContext.Provider value={{ state, setState }}>
        <ChildComponent />
      </MyContext.Provider>
    );
   }
   

3. Consume Context Value: This Use the context value in the child components by using the useContext hook or the Consumer component.
   

   import React, { useContext } from 'react';
   import MyContext from './path-to-context';
   function ChildComponent() {
    const { state, setState } = useContext(MyContext);
    return (
      <div>
        <p>{state}</p>
        <button onClick={() => setState("Context API is awesome!")}>
          Change Text
        </button>
      </div>
    );
   }
   

Example Usage

Here’s a complete example demonstrating how to use the Context API:

import React, { createContext, useState, useContext } from 'react';

// Create a context
const MyContext = createContext();

function App() {
  const [state, setState] = useState("Hello, World!");

  return (
    43ad9860753b01834247292615a2b05f
      88f9b25aeabe4ed8ddd63b3febe25d20
    8e66e6aff1f0a13ebced51b2c1b5d182
  );
}

function ChildComponent() {
  const { state, setState } = useContext(MyContext);

  return (
    dc6dce4a544fdca2df29d5ac0ea9906b
      e388a4556c0f65e1904146cc1a846bee{state}94b3e26ee717c64999d7867364b1b4a3
      5ddc0978355752d4bf828563dc007a14 setState("Context API is awesome!")}>
        Change Text
      65281c5ac262bf6d81768915a4a77ac0
    16b28748ea4df4d9c2150843fecfba68
  );
}

export default App;

Key Takeaways:

1. Erstellen des Kontexts: createContext() wird verwendet, um das Kontextobjekt zu erstellen, das einen Anbieter und einen Verbraucher enthält.
2. Bereitstellung des Kontexts: Die Provider-Komponente wird verwendet, um den aktuellen Kontextwert an den Baum der Komponenten zu übergeben, die ihn benötigen.
3. Konsumieren des Kontexts: Der useContext-Hook wird innerhalb einer Funktionskomponente verwendet, um auf den Kontextwert zuzugreifen.

Wann sollte die Kontext-API verwendet werden?

Die Kontext-API ist ideal für Szenarien, in denen Sie Status oder Daten über mehrere Komponenten hinweg teilen müssen, ohne Requisiten durch jede Ebene des Komponentenbaums weiterleiten zu müssen. Dies ist besonders nützlich, wenn es um den globalen Status geht oder wenn tief verschachtelte Komponenten auf den Status zugreifen müssen. Hier sind einige spezielle Fälle, in denen die Kontext-API von Vorteil ist:

1. Themengestaltung:

   • Beispiel: Themen (heller oder dunkler Modus) in einer gesamten Anwendung verwalten.
   • Details: Der Theme-Status wird von mehreren Komponenten gemeinsam genutzt, um sicherzustellen, dass die Benutzeroberfläche das ausgewählte Theme konsistent widerspiegelt.

2. Benutzerauthentifizierung:

   • Beispiel: Benutzerauthentifizierungsstatus und Benutzerinformationen verwalten.
   • Details: Auf den Authentifizierungsstatus (angemeldet/abgemeldet) und die Benutzerdaten (Benutzername, Rollen usw.) muss über verschiedene Komponenten wie Header, Profilseiten und geschützte Routen zugegriffen werden.

3. Sprachlokalisierung:

   • Beispiel: Umgang mit mehrsprachiger Unterstützung in einer Anwendung.
   • Details: Der ausgewählte Sprachstatus und die Übersetzungsdaten müssen für Textwiedergabekomponenten in der gesamten App verfügbar sein.

4. Komplexe Statusverwaltung für Formulare:

   • Beispiel: Formulardaten und Validierungsstatus über mehrere Formularfelder und -komponenten hinweg teilen.
   • Details: Formulare, die mehrere Schritte oder Komponenten umfassen, können von einem gemeinsamen Status profitieren, der Eingabewerte und Validierungsfehler verfolgt.

Wenn Sie wissen, wann und wie Sie die Kontext-API verwenden, können Sie den globalen Status in einer React-Anwendung effizienter verwalten. Dieser Ansatz hilft, die Fallstricke des Prop-Drillings zu vermeiden, hält Ihre Codebasis sauber und wartbar und trägt zur Erstellung robusterer und skalierbarerer React-Anwendungen bei.

Drittanbieterbibliotheken für die Staatsverwaltung

Zustandsverwaltungsbibliotheken von Drittanbietern bieten zusätzliche Tools und Muster für die effiziente Zustandsverwaltung, insbesondere in komplexen Anwendungen. Diese Bibliotheken verfügen häufig über erweiterte Funktionen und Optimierungen, die die integrierten Zustandsverwaltungslösungen von React verbessern. Zu den beliebtesten Zustandsverwaltungsbibliotheken von Drittanbietern gehören Redux, MobX, Recoil und Zustand.

In diesem Artikel befassen wir uns mit Redux. Wenn Sie andere der genannten verwenden müssen, können Sie sich deren Dokumentation ansehen. Ich werde am Ende dieses Artikels Links hinzufügen. Fühlen Sie sich nicht überfordert, die meisten dieser Tools sind recht anfängerfreundlich. Jetzt lasst uns direkt zu Redux springen!

Zustandsverwaltung mit Redux

Redux ist eine Zustandsverwaltungsbibliothek eines Drittanbieters, die eine optimale Lösung für Propellerbohrungen und globale Zustandsverwaltung bietet, indem sie alle Zustände an einem zentralen Ort namens Store speichert. Dies bedeutet, dass alle Komponenten unabhängig von ihrer Position im Komponentenbaum unabhängig auf diesen Zustand zugreifen können.

Dies ist von entscheidender Bedeutung, da Anwendungen immer größer werden und immer mehr Zustände verwaltet werden müssen. Daher ist es wichtig, diese an einem Ort zu abstrahieren. Diese Organisation macht unseren Code sauberer und das Debuggen einfacher. Klingt großartig, oder?

Beachten Sie, dass Redux nicht speziell auf React beschränkt ist; Es handelt sich um eine unabhängige Bibliothek, die in andere JavaScript-Frameworks wie Angular, Vue und mehr integriert werden kann.

So verwenden Sie Redux in React

Bevor wir Schritt für Schritt mit der Verwendung von Redux beginnen, ist es wichtig, die Schlüsselkonzepte zu verstehen, die die Grundlage von Redux bilden:

1. Store: The store is the central repository for an application's state. It holds the entire state tree and provides methods to access and update the state.
2. Reducers: Reducers are pure functions that determine how the state changes in response to actions. They take the current state and an action as arguments and return a new state.
3. Actions: Actions are plain JavaScript objects that describe what happened in the application. Each action has a type property and may include additional data.
4. Action Creators: Action creators are functions that create and return action objects. They encapsulate the action creation logic, making the code more manageable.
5. Dispatch: Dispatch is a function provided by the Redux store that sends actions to the store. It triggers reducers to process the action and update the state.

Understanding these concepts is essential to effectively implementing Redux in your React application.

How to Integrate and Use Redux in Your React Project

In this subsection, you will learn a step-by-step approach to integrating Redux with your React projects. We'll use a simple counter-example to illustrate the process. Here are the steps:

Setting up your Project

• Create a React app with Vite:
  

   npm create vite@latest projectName
  

• Navigate into your project directory:
  

   cd projectName
  

• Install Redux Toolkit and React-Redux:
  

   npm install @reduxjs/toolkit react-redux
  

1. Creating the Redux Store: Create a new file src/app/store.js and set up the Redux store:
   

    import { createStore } from 'redux';
    import rootReducer from '../features/counter/counterReducer';
   
    const store = createStore(rootReducer);
   
    export default store;
   

2. Creating the Reducer: Create a new directory src/features/counter and inside it, create a file counterReducer.js:
   

    const initialState = {
      value: 0,
    };
   
    function counterReducer(state = initialState, action) {
      switch (action.type) {
        case 'INCREMENT':
          return { ...state, value: state.value + 1 };
        case 'DECREMENT':
          return { ...state, value: state.value - 1 };
        case 'INCREMENT_BY_AMOUNT':
          return { ...state, value: state.value + action.payload };
        default:
          return state;
      }
    }
   
    export default counterReducer;
   

3. Creating Actions: In the same directory, create a file counterActions.js:
   

    export const increment = () => ({
      type: 'INCREMENT',
    });
   
    export const decrement = () => ({
      type: 'DECREMENT',
    });
   
    export const incrementByAmount = (amount) => ({
      type: 'INCREMENT_BY_AMOUNT',
      payload: amount,
    });
   

4. Providing the Store to Your App: Wrap your application with the Redux Provider in src/main.jsx:
   

    import React from 'react';
    import ReactDOM from 'react-dom';
    import { Provider } from 'react-redux';
    import store from './app/store';
    import App from './App';
    import './index.css';
   
    ReactDOM.render(
      <Provider store={store}>
        <App />
      </Provider>,
      document.getElementById('root')
    );
   

5. Connecting React Components to Redux: In your src/App.jsx, use the Redux state and dispatch actions:
   

    import React from 'react';
    import { useSelector, useDispatch } from 'react-redux';
    import { increment, decrement, incrementByAmount } from './features/counter/counterActions';
   
    function App() {
      const count = useSelector((state) => state.value);
      const dispatch = useDispatch();
   
      return (
        <div>
          <p>Count: {count}</p>
          <button onClick={() => dispatch(increment())}>+</button>
          <button onClick={() => dispatch(decrement())}>-</button>
          <button onClick={() => dispatch(incrementByAmount(2))}>+2</button>
        </div>
      );
    }
   
    export default App;
   

This is how to use Redux in your React applications. If you need to know more, you can check the documentation. However, Redux has introduced a more optimized way of writing Redux applications with Redux Toolkit (RTK).

Before RTK, the legacy Redux was the only way to use Redux. Now, we have Redux Toolkit with some optimized features, and that is what we will be covering in the next section.

How to Use Redux Toolkit in React

RTK introduces several key concepts that simplify state management. The major ones you need to know are:

1. Slices: A slice is a collection of Redux reducer logic and actions for a single feature of your application. It streamlines the process of writing reducers and actions into a single unit.

2. createSlice: This RTK function helps you create a slice, automatically generating action creators and action types. It reduces boilerplate code significantly.

3. configureStore: This function simplifies the process of creating a Redux store by providing good defaults, including integration with the Redux DevTools Extension and middleware like redux-thunk.

4. createAsyncThunk: This function is used for handling asynchronous logic. It generates actions and action creators to manage different stages of an asynchronous operation (e.g., pending, fulfilled, and rejected).

5. Selectors: Functions that extract and derive pieces of state from the store. RTK encourages using selectors to encapsulate and reuse state logic.

6. RTK Query: An advanced data fetching and caching tool built into RTK. It simplifies handling server-side data, reducing the need for boilerplate code related to data fetching, caching, and synchronization.

Understanding these concepts is essential for effectively implementing Redux Toolkit in your React application.

How to integrate and use Redux Toolkit in your React project

In this subsection, you'll learn a step-by-step approach to integrating Redux Toolkit with your React projects. We’ll use a simple counter example, similar to the one used in the plain Redux example, to highlight the improvements and optimizations Redux Toolkit offers. Here are the steps:

Setting up your Project

• Create a React app with Vite:
  

   npm create vite@latest projectName
  

• Navigate into your project directory:
  

   cd projectName
  

• Install Redux Toolkit and React-Redux:
  

   npm install @reduxjs/toolkit react-redux
  

1. Creating a Redux Slice: Create a new file for your slice (e.g., counterSlice.js):
   

    import { createSlice } from '@reduxjs/toolkit';
   
    const counterSlice = createSlice({
      name: 'counter',
      initialState: { count: 0 },
      reducers: {
        increment: (state) => {
          state.count += 1;
        },
        decrement: (state) => {
          state.count -= 1;
        },
      },
    });
   
    export const { increment, decrement } = counterSlice.actions;
    export default counterSlice.reducer;
   

2. Configuring the Store: Create a new file for your store (e.g., store.js):
   

    import { configureStore } from '@reduxjs/toolkit';
    import counterReducer from './counterSlice';
   
    const store = configureStore({
      reducer: {
        counter: counterReducer,
      },
    });
   
    export default store;
   

3. Providing the Store to Your App: Wrap your app with the Provider component in your main file (e.g., main.js or index.js):
   

    import React from 'react';
    import ReactDOM from 'react-dom';
    import { Provider } from 'react-redux';
    import store from './store';
    import App from './App';
   
    ReactDOM.render(
      <Provider store={store}>
        <App />
      </Provider>,
      document.getElementById('root')
    );
   

4. Using Redux State and Actions in Your Components: Use the useSelector and useDispatch hooks in your component (e.g., Counter.js):
   

    import React from 'react';
    import { useSelector, useDispatch } from 'react-redux';
    import { increment, decrement } from './counterSlice';
   
    function Counter() {
      const count = useSelector((state) => state.counter.count);
      const dispatch = useDispatch();
   
      return (
        <div>
          <p>{count}</p>
          <button onClick={() => dispatch(increment())}>+</button>
          <button onClick={() => dispatch(decrement())}>-</button>
        </div>
      );
    }
   
    export default Counter;
   

Redux Toolkit (RTK) simplifies and optimizes the traditional Redux setup by reducing boilerplate code and integrating essential tools and best practices. While legacy Redux requires manual configuration and verbose code for actions and reducers, RTK offers a more streamlined approach with utility functions like configureStore, createSlice, and createAsyncThunk.

RTK includes built-in middleware, integrates seamlessly with Redux DevTools, and promotes a standard way of writing Redux logic, making state management in React applications more efficient and maintainable. If you need to use Redux, I recommend using the modern Redux Toolkit, as it is now recommended by Redux. You can check the docs to learn more about RTK.

When to Use Redux

Redux is a powerful state management library, but it isn't always necessary for every React application. Here are some scenarios when using Redux might be beneficial:

1. Complex State Logic:

   • When your application has complex state logic that is difficult to manage with React's built-in hooks like useState and useReducer.
   • Example: An e-commerce application with multiple product filters, user authentication, and a shopping cart.

2. Global State Management:

   • When you have state that needs to be accessed and updated by many components across different parts of your application.
   • Example: A user authentication system where user data needs to be accessible throughout the application.

3. Consistent and Predictable State:

   • When you need a predictable state container that helps you debug and test your application more easily.
   • Example: A large-scale application where you need to maintain and track the state transitions clearly.

4. DevTools Integration:

   • When you want to leverage powerful developer tools like Redux DevTools for tracking state changes and debugging.
   • Example: During development, Redux DevTools can help in understanding how the state changes in response to actions.

Conclusion

I hope by now you have gained more clarity and insights into choosing the right state management tool for your projects. We have covered tools that cater to both small and extremely large projects. With the knowledge gained from this article, you can now make more informed decisions for your projects. See you next time on another insightful topic.

Further reading and learning

• Redux docs

• Zustand docs

• Mobx docs

• Recoil docs

• React docs

Das obige ist der detaillierte Inhalt vonStatusverwaltung in Reactjs: Ein Leitfaden zur Auswahl des richtigen Statusverwaltungstools für Ihre Projekte. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!