Nota Redux Toolkit Komprehensif untuk Pembangun React

? Nota Redux Toolkit ?

Apakah Redux?
Redux ialah bekas keadaan fleksibel untuk apl JS yang mengurus keadaan aplikasi kami secara berasingan. Ia menguruskan keadaan aplikasi dalam satu kedai, menjadikannya lebih mudah untuk mengendalikan logik keadaan kompleks merentas keseluruhan apl.

Kenapa Redux?
Dalam aliran biasa, kita perlu melakukan penggerudian prop untuk melepasi keadaan di antara komponen. Sesetengah peringkat tidak memerlukan negeri di sini, yang merupakan beban. Juga meningkatkan keadaan untuk apl sederhana besar bukanlah penyelesaian berskala kerana ia memerlukan perubahan struktur. Itulah sebabnya kita memerlukan redux untuk mengurus negeri. Semua negeri di sini disimpan di kedai dan mana-mana komponen yang diperlukan mereka boleh melanggan kedai itu sahaja. Redux memastikan pengurusan keadaan boleh diramal, penyahpepijatan yang lebih mudah dan kebolehskalaan yang dipertingkatkan dengan menguatkuasakan aliran data satu arah.

Komponen Redux Teras:

Tindakan: Objek yang menerangkan apa yang berlaku. Ia biasanya mengandungi jenis dan muatan pilihan. (Arahan)
Penghantaran: Fungsi yang digunakan untuk menghantar tindakan ke kedai untuk mengemas kini keadaan. (Peristiwa berlaku)
Penurun: Fungsi tulen yang mengambil keadaan semasa dan tindakan, kemudian mengembalikan keadaan baharu. (Fungsi yang tercetus apabila tindakan dihantar)

Memasang: npm i @reduxjs/toolkit react-redux

Aliran Kerja Redux:

Membuat Slice:
A slice ialah koleksi logik dan tindakan pengurang Redux untuk satu ciri. Panggilan balik sediakan membolehkan AS menyesuaikan muatan tindakan sebelum ia mencapai pengurang.

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;

Mencipta kedai:

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

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

Balut dengan pembekal:

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

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

Penggunaan dalam Komponen:

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>
 );
};

Sambungan Penyemak Imbas Redux: Redux DevTools

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

Operasi Async dalam Redux (Redux Thunk):

Dalam Redux, operasi tak segerak (seperti panggilan API) dikendalikan menggunakan middleware kerana Redux secara lalai hanya menyokong kemas kini keadaan segerak. Perisian tengah yang paling biasa untuk mengendalikan operasi async ialah Redux Thunk, Redux Toolkit (RTK) dengan createAsyncThunk dan Redux Saga.

Pelaksanaan:

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;

Kes Penggunaan:

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;

Perisian Tengah
Middleware dalam Redux memintas tindakan yang dihantar, membenarkan pengelogan, pelaporan ranap sistem atau mengendalikan logik async. Middleware membolehkan kami menyesuaikan proses penghantaran.

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),
});

Pemilih
Pemilih membantu mengakses bahagian tertentu negeri.

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

Pengendalian Ralat
Kendalikan ralat secara berkesan dengan pengurusan keadaan yang betul.

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;

Pertanyaan RTK (Pengambilan Data Ringkas)

Pertanyaan RTK memudahkan pengambilan data, caching dan penyegerakan. RTK Query secara automatik cache permintaan dan mengelakkan pengambilan semula yang tidak perlu, meningkatkan prestasi.

Menyediakan Pertanyaan RTK

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

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

Penggunaan dalam Komponen

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

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

Kemas Kini Tidak Berubah dengan Immer

Immer membolehkan kami menulis logik yang menyatakan "mutasi" secara langsung sambil memastikan kemas kini tidak berubah di bawah hud.

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>
 );
};

Mutasi lwn. Tidak Boleh Berubah

Mutasi: Menukar data secara langsung. Contohnya, mengubah suai objek atau tatasusunan.
Tidak boleh diubah: Daripada mengubah suai data secara langsung, kami membuat salinan baharu dengan perubahan yang digunakan, meninggalkan data asal tidak disentuh.

Cara Immer Berfungsi
Immer membantu kami menulis kod yang kelihatan seperti kami mengubah data (iaitu, menukarnya secara terus), tetapi ia secara automatik memastikan perubahan tidak berubah di bawah hud. Ini berguna untuk mengelakkan pepijat biasa apabila berurusan dengan struktur data tidak berubah dalam JavaScript.
Contoh: Tanpa Immer (mutasi):

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

Dengan Immer (ketidakbolehubah):

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;

Ini memudahkan kerja dengan Redux (atau mana-mana pengurusan negeri) kerana kami tidak perlu mengklon dan mengemas kini keadaan secara manual; Immer melakukannya untuk kami secara automatik.

Redux Berterusan:

Untuk mengekalkan keadaan Redux merentas penyegaran halaman, kami boleh menyepadukan Redux Persist. Ini akan menyimpan keadaan Redux anda dalam storan tempatan atau storan sesi dan memuatkannya semula apabila apl dimuat semula.

Pasang:
npm install redux-persist

Melaksanakan:

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;

Balut dengan Pintu Persisit:

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),
});

Penambahan Pilihan

Gunakan sessionStorage Daripada localStorage:
Tukar storan kepada berasaskan sesi (kosongkan apabila penyemak imbas ditutup):

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

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

Kegigihan Terpilih:
Hanya kekalkan bahagian tertentu negeri:

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;

Saya telah mencipta projek blog ringkas dengan reka bentuk reaksi, redux dan semut yang mempunyai fungsi CRUD. Anda boleh menyemaknya.
Pautan Projek - Apl Blog Redux

? Kuasai Kit Alat Redux dan tingkatkan apl React anda!

Atas ialah kandungan terperinci Nota Redux Toolkit Komprehensif untuk Pembangun React. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!