Umfassende Hinweise zum Redux Toolkit für React-Entwickler

? Hinweise zum Redux Toolkit?

Was ist Redux?
Redux ist ein flexibler Statuscontainer für JS-Apps, der unseren Anwendungsstatus separat verwaltet. Es verwaltet den Anwendungsstatus in einem einzigen Store und erleichtert so die Handhabung komplexer Statuslogik in der gesamten App.

Warum Redux?
Im normalen Fluss müssen wir Prop-Bohrungen durchführen, um Zustände zwischen Komponenten zu übergeben. Einige Ebenen benötigen die Zustände hier nicht, was eine Belastung darstellt. Auch die Anhebung eines Status für große mittlere Apps ist keine skalierbare Lösung, da hierfür strukturelle Änderungen erforderlich sind. Deshalb brauchen wir Redux, um Zustände zu verwalten. Alle Zustände hier werden im Speicher gehalten und jede Komponente, die sie benötigt, kann diesen Speicher einfach abonnieren. Redux gewährleistet eine vorhersehbare Zustandsverwaltung, einfacheres Debuggen und verbesserte Skalierbarkeit, indem es einen unidirektionalen Datenfluss erzwingt.

Kern-Redux-Komponenten:

Aktion: Ein Objekt, das beschreibt, was passiert ist. Es enthält normalerweise einen Typ und eine optionale Nutzlast. (Ein Befehl)
Versand: Eine Funktion, mit der Aktionen an den Store gesendet werden, um den Status zu aktualisieren. (Ein auftretendes Ereignis)
Reduzierer: Eine reine Funktion, die den aktuellen Zustand und eine Aktion annimmt und dann einen neuen Zustand zurückgibt. (Funktion, die ausgelöst wird, wenn eine Aktion ausgelöst wird)

Installieren: npm i @reduxjs/toolkit React-Redux

Redux-Workflow:

Slice erstellen:
Ein Slice ist eine Sammlung von Redux-Reducer-Logik und -Aktionen für ein einzelnes Feature. Der Prepare-Callback ermöglicht es uns, die Aktionsnutzlast anzupassen, bevor sie den Reduzierer erreicht.

import { createSlice, nanoid } from "@reduxjs/toolkit";

const postSlice = createSlice({
 name: "posts",
 initialState: [],
 reducers: {
   addPost: {
     reducer: (state, action) => {
       state.push(action.payload);
     },
     prepare: (title, content) => ({
       payload: { id: nanoid(), title, content },
     }),
   },
   deletePost: (state, action) => {
     return state.filter((post) => post.id != action.payload);
   },
 },
});

export const { addPost, deletePost } = postSlice.actions;

export default postSlice.reducer;

Shop erstellen:

import { configureStore } from "@reduxjs/toolkit";
import postReducer from "../features/posts/postSlice";

export const store = configureStore({
   reducer: {
       posts: postReducer
   },
 });

Mit Anbieter abwickeln:

import { Provider } from "react-redux";
import { store } from "./app/store.jsx";

createRoot(document.getElementById("root")).render(
 <StrictMode>
   <Provider store={store}>
     <App />
   </Provider>
 </StrictMode>
);

Verwendung in Komponente:

const PostList = ({ onEdit }) => {
 const posts = useSelector((state) => state.posts);
 const dispatch = useDispatch();

 return (
   <div className="w-full grid grid-cols-1 gap-6 mt-12">
     {posts.map((post) => (
       <div key={post.id}></div>
     ))}
   </div>
 );
};

Redux-Browser-Erweiterung:Redux DevTools

const store = configureStore({
  reducer: rootReducer,
  devTools: process.env.NODE_ENV !== 'production',
});

Asynchroner Betrieb in Redux (Redux Thunk):

In Redux werden asynchrone Vorgänge (wie API-Aufrufe) mithilfe von Middleware abgewickelt, da Redux standardmäßig nur synchrone Statusaktualisierungen unterstützt. Die gängigsten Middlewares für die Verarbeitung asynchroner Vorgänge sind Redux Thunk, Redux Toolkit (RTK) mit createAsyncThunk und Redux Saga.

Umsetzung:

import { createSlice, createAsyncThunk } from '@reduxjs/toolkit';

// Fetch all posts
export const fetchPosts = createAsyncThunk('posts/fetchPosts', async () => {
  const response = await fetch('https://jsonplaceholder.typicode.com/posts');
  return response.json();
});

// Initial State
const initialState = {
  posts: [],
  post: null,
  loading: false,
  error: null,
};

// Slice
const postsSlice = createSlice({
  name: 'posts',
  initialState,
  reducers: {},
  extraReducers: (builder) => {
    builder
      // Fetch all posts
      .addCase(fetchPosts.pending, (state) => {
        state.loading = true;
      })
      .addCase(fetchPosts.fulfilled, (state, action) => {
        state.loading = false;
        state.posts = action.payload;
      })
      .addCase(fetchPosts.rejected, (state, action) => {
        state.loading = false;
        state.error = action.error.message;
      })

      },
});

export default postsSlice.reducer;

Anwendungsfall:

import React, { useEffect } from 'react';
import { useSelector, useDispatch } from 'react-redux';
import { fetchPosts, createPost, updatePost, deletePost } from './postsSlice';

const Posts = () => {
  const dispatch = useDispatch();
  const { posts, loading, error } = useSelector((state) =>state.posts);

  useEffect(() => {
    dispatch(fetchPosts());
  }, [dispatch]);

  const handleCreate = () => {
    dispatch(createPost({ title: 'New Post', body: 'This is a new post' }));
  };

  if (loading) return <p>Loading...</p>;
  if (error) return <p>Error: {error}</p>;

  return (
    <div>
      <h1>Posts</h1>
      <button onClick={handleCreate}>Create Post</button>
     </div>
  );
};

export default Posts;

Middleware
Middleware in Redux fängt ausgelöste Aktionen ab und ermöglicht so die Protokollierung, Absturzberichte oder die Handhabung asynchroner Logik. Mit Middleware können wir den Versandprozess anpassen.

const blogPostMiddleware = (storeAPI) => (next) => (action) => {
  if (action.type === 'posts/publishPost') {
    const contentLength = action.payload.content.length;

    if (contentLength < 50) {
      console.warn('Post content is too short. Must be at least 50 characters.');
      return;
    }
    console.log('Publishing post:', action.payload.title);
  }
  return next(action);
};

const store = configureStore({
  reducer: rootReducer,
  middleware: (getDefaultMiddleware) => getDefaultMiddleware().concat(blogPostMiddleware),
});

Selektoren
Selektoren helfen beim Zugriff auf bestimmte Teile des Staates.

export const selectCount = (state) => state.counter.value;

Fehlerbehandlung
Behandeln Sie Fehler effektiv mit der richtigen Statusverwaltung.

import { createSlice, nanoid } from "@reduxjs/toolkit";

const postSlice = createSlice({
 name: "posts",
 initialState: [],
 reducers: {
   addPost: {
     reducer: (state, action) => {
       state.push(action.payload);
     },
     prepare: (title, content) => ({
       payload: { id: nanoid(), title, content },
     }),
   },
   deletePost: (state, action) => {
     return state.filter((post) => post.id != action.payload);
   },
 },
});

export const { addPost, deletePost } = postSlice.actions;

export default postSlice.reducer;

RTK-Abfrage (vereinfachtes Datenabrufen)

RTK Query vereinfacht das Abrufen, Zwischenspeichern und Synchronisieren von Daten. RTK Query speichert Anfragen automatisch zwischen und vermeidet unnötiges erneutes Abrufen, wodurch die Leistung verbessert wird.

RTK-Abfrage einrichten

import { configureStore } from "@reduxjs/toolkit";
import postReducer from "../features/posts/postSlice";

export const store = configureStore({
   reducer: {
       posts: postReducer
   },
 });

Verwendung in Komponenten

import { Provider } from "react-redux";
import { store } from "./app/store.jsx";

createRoot(document.getElementById("root")).render(
 <StrictMode>
   <Provider store={store}>
     <App />
   </Provider>
 </StrictMode>
);

Unveränderliche Updates mit Immer

Immer ermöglicht es uns, Logik zu schreiben, die den Zustand direkt „verändert“, während die Aktualisierungen unter der Haube unveränderlich bleiben.

const PostList = ({ onEdit }) => {
 const posts = useSelector((state) => state.posts);
 const dispatch = useDispatch();

 return (
   <div className="w-full grid grid-cols-1 gap-6 mt-12">
     {posts.map((post) => (
       <div key={post.id}></div>
     ))}
   </div>
 );
};

Mutieren vs. unveränderlich

Mutieren:Daten direkt ändern. Zum Beispiel das Ändern eines Objekts oder Arrays.
Unveränderlich:Anstatt Daten direkt zu ändern, erstellen wir eine neue Kopie mit den übernommenen Änderungen, wobei die Originaldaten unberührt bleiben.

Wie Immer funktioniert
Immer hilft uns dabei, Code zu schreiben, der aussieht, als würden wir Daten mutieren (d. h. direkt ändern), aber die Änderungen bleiben unter der Haube automatisch unveränderlich. Dies ist nützlich, um häufige Fehler beim Umgang mit unveränderlichen Datenstrukturen in JavaScript zu vermeiden.
Beispiel: Ohne Immer (Mutation):

const store = configureStore({
  reducer: rootReducer,
  devTools: process.env.NODE_ENV !== 'production',
});

Mit Immer (Unveränderlichkeit):

import { createSlice, createAsyncThunk } from '@reduxjs/toolkit';

// Fetch all posts
export const fetchPosts = createAsyncThunk('posts/fetchPosts', async () => {
  const response = await fetch('https://jsonplaceholder.typicode.com/posts');
  return response.json();
});

// Initial State
const initialState = {
  posts: [],
  post: null,
  loading: false,
  error: null,
};

// Slice
const postsSlice = createSlice({
  name: 'posts',
  initialState,
  reducers: {},
  extraReducers: (builder) => {
    builder
      // Fetch all posts
      .addCase(fetchPosts.pending, (state) => {
        state.loading = true;
      })
      .addCase(fetchPosts.fulfilled, (state, action) => {
        state.loading = false;
        state.posts = action.payload;
      })
      .addCase(fetchPosts.rejected, (state, action) => {
        state.loading = false;
        state.error = action.error.message;
      })

      },
});

export default postsSlice.reducer;

Dies erleichtert die Arbeit mit Redux (oder einer anderen Statusverwaltung), da wir den Status nicht manuell klonen und aktualisieren müssen; Immer erledigt das automatisch für uns.

Redux bleibt bestehen:

Um den Redux-Status über Seitenaktualisierungen hinweg beizubehalten, können wir Redux Persist integrieren. Dadurch wird Ihr Redux-Status im lokalen Speicher oder Sitzungsspeicher gespeichert und neu geladen, wenn die App aktualisiert wird.

Installieren:
npm install redux-persist

Implementieren:

import React, { useEffect } from 'react';
import { useSelector, useDispatch } from 'react-redux';
import { fetchPosts, createPost, updatePost, deletePost } from './postsSlice';

const Posts = () => {
  const dispatch = useDispatch();
  const { posts, loading, error } = useSelector((state) =>state.posts);

  useEffect(() => {
    dispatch(fetchPosts());
  }, [dispatch]);

  const handleCreate = () => {
    dispatch(createPost({ title: 'New Post', body: 'This is a new post' }));
  };

  if (loading) return <p>Loading...</p>;
  if (error) return <p>Error: {error}</p>;

  return (
    <div>
      <h1>Posts</h1>
      <button onClick={handleCreate}>Create Post</button>
     </div>
  );
};

export default Posts;

Umwickeln mit Persisit Gate:

const blogPostMiddleware = (storeAPI) => (next) => (action) => {
  if (action.type === 'posts/publishPost') {
    const contentLength = action.payload.content.length;

    if (contentLength < 50) {
      console.warn('Post content is too short. Must be at least 50 characters.');
      return;
    }
    console.log('Publishing post:', action.payload.title);
  }
  return next(action);
};

const store = configureStore({
  reducer: rootReducer,
  middleware: (getDefaultMiddleware) => getDefaultMiddleware().concat(blogPostMiddleware),
});

Optionale Erweiterungen

Verwenden Sie sessionStorage anstelle von localStorage:
Ändern Sie den Speicher auf sitzungsbasiert (wird gelöscht, wenn der Browser geschlossen wird):

initialState: {
  items: [],
  status: 'idle',
  error: null,
},

.addCase(fetchData.rejected, (state, action) => {
  state.status = 'failed';
  state.error = action.error.message;
});

Selektive Persistenz:
Behalten Sie nur bestimmte Abschnitte des Zustands bei:

import { createApi, fetchBaseQuery } from '@reduxjs/toolkit/query/react';

const api = createApi({
  reducerPath: 'api',
  baseQuery: fetchBaseQuery({ baseUrl: 'https://jsonplaceholder.typicode.com' }),
  endpoints: (builder) => ({
    getPosts: builder.query({
      query: () => '/posts',
    }),
    getPostById: builder.query({
      query: (id) => `/posts/${id}`,
    }),
    createPost: builder.mutation({
      query: (newPost) => ({
        url: '/posts',
        method: 'POST',
        body: newPost,
      }),
    }),
    updatePost: builder.mutation({
      query: ({ id, ...updatedPost }) => ({
        url: `/posts/${id}`,
        method: 'PUT',
        body: updatedPost,
      }),
    }),
    deletePost: builder.mutation({
      query: (id) => ({
        url: `/posts/${id}`,
        method: 'DELETE',
      }),
    }),
  }),
});

export const {
  useGetPostsQuery,
  useGetPostByIdQuery,
  useCreatePostMutation,
  useUpdatePostMutation,
  useDeletePostMutation,
} = api;
export default api;

Ich habe ein einfaches Blog-Projekt mit React-, Redux- und Ant-Design mit CRUD-Funktionalität erstellt. Sie können es sich ansehen.
Projektlink – Redux Blog App

? Beherrschen Sie das Redux Toolkit und verbessern Sie Ihre React-Apps!

Das obige ist der detaillierte Inhalt vonUmfassende Hinweise zum Redux Toolkit für React-Entwickler. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!