？ Redux 工具包註解？

Redux 是什麼？
Redux 是 JS 應(yīng)用程式的靈活狀態(tài)容器，可單獨(dú)管理我們的應(yīng)用程式狀態(tài)。它在單一儲(chǔ)存中管理應(yīng)用程式狀態(tài)，從而更輕鬆地處理整個(gè)應(yīng)用程式中的複雜狀態(tài)邏輯。

為什麼要 Redux？
在正常流程中，我們需要進(jìn)行道具鑽探以在元件之間傳遞狀態(tài)。有些關(guān)卡不需要這裡的狀態(tài)，這是一種負(fù)擔(dān)。此外，提升大型中型應(yīng)用程式的狀態(tài)並不是可擴(kuò)展的解決方案，因?yàn)樗枰M(jìn)行結(jié)構(gòu)性變更。這就是為什麼我們需要 redux 來(lái)管理狀態(tài)。這裡的所有狀態(tài)都保存在儲(chǔ)存中，無(wú)論哪個(gè)元件需要，它們都可以訂閱該儲(chǔ)存。 Redux 透過(guò)強(qiáng)制執(zhí)行單向資料流來(lái)確?？深A(yù)測(cè)的狀態(tài)管理、更輕鬆的偵錯(cuò)並提高可擴(kuò)展性。

Redux 核心元件：

操作： 描述發(fā)生的事情的物件。它通常包含一個(gè)類型和一個(gè)可選的有效負(fù)載。 （命令）
調(diào)度： 用於向儲(chǔ)存發(fā)送操作以更新?tīng)顟B(tài)的函數(shù)。 （事件發(fā)生）
Reducer： 一個(gè)純函數(shù)，它接受目前狀態(tài)和一個(gè)操作，然後傳回一個(gè)新?tīng)顟B(tài)。 （動(dòng)作調(diào)度時(shí)觸發(fā)的函數(shù)）

安裝： npm i @reduxjs/toolkit react-redux

Redux 工作流程：

建立切片：
切片是單一功能的 Redux 減速機(jī)邏輯和操作的集合。準(zhǔn)備回調(diào)允許我們?cè)诓僮饔行ж?fù)載到達(dá)減速器之前對(duì)其進(jìn)行自訂。

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;

正在建立商店：

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

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

與提供者一起包裹：

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

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

在組件中使用：

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 瀏覽器擴(kuò)充： Redux DevTools

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

Redux 中的非同步操作（Redux Thunk）：

在 Redux 中，非同步操作（如 API 呼叫）是使用中間件處理的，因?yàn)?Redux 預(yù)設(shè)僅支援同步狀態(tài)更新。用於處理非同步操作的最常見(jiàn)中間件是 Redux Thunk、帶有 createAsyncThunk 的 Redux Toolkit (RTK) 和 Redux Saga。

實(shí)作：

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;

用例：

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;

中介軟體
Redux 中的中介軟體攔截分派的操作，允許日誌記錄、崩潰報(bào)告或處理非同步邏輯。中間件讓我們可以自訂調(diào)度過(guò)程。

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

選擇器
選擇器有助於訪問(wèn)該州的特定部分。

export const selectCount = (state) =>狀態(tài).計(jì)數(shù)器.值;

錯(cuò)誤處理
透過(guò)適當(dāng)?shù)臓顟B(tài)管理有效地處理錯(cuò)誤。

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 查詢（簡(jiǎn)化資料取得）

RTK 查詢簡(jiǎn)化了資料取得、快取和同步。 RTK 查詢自動(dòng)快取請(qǐng)求並避免不必要的重新獲取，從而提高效能。

設(shè)定 RTK 查詢

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

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

組件中的使用

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

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

使用 Immer 進(jìn)行不可變更新

Immer 允許我們編寫(xiě)直接「改變」?fàn)顟B(tài)的邏輯，同時(shí)保持更新在幕後不可變。

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

變異與不可變

Mutate：直接變更資料。例如，修改物件或陣列。
不可變：我們不是直接修改數(shù)據(jù)，而是創(chuàng)建一個(gè)應(yīng)用更改的新副本，保持原始數(shù)據(jù)不變。

Immer 的工作原理
Immer 幫助我們編寫(xiě)看起來(lái)像是在改變資料的程式碼（即直接更改資料），但它會(huì)自動(dòng)使變更在幕後保持不變。這對(duì)於在處理 JavaScript 中的不可變資料結(jié)構(gòu)時(shí)避免常見(jiàn)錯(cuò)誤很有用。
範(fàn)例：沒(méi)有 Immer（突變）：

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

使用 Immer（不變性）：

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;

這使得使用 Redux（或任何狀態(tài)管理）變得更容易，因?yàn)槲覀儾槐厥謩?dòng)複製和更新?tīng)顟B(tài)； Immer 會(huì)自動(dòng)為我們做這件事。

Redux 持久化：

為了在頁(yè)面刷新時(shí)保持 Redux 狀態(tài)，我們可以整合 Redux Persist。這會(huì)將您的 Redux 狀態(tài)儲(chǔ)存在本機(jī)儲(chǔ)存或會(huì)話儲(chǔ)存中，並在刷新應(yīng)用程式時(shí)重新載入它。

安裝：
npm install redux-persist

實(shí)作：

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;

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

選購(gòu)增強(qiáng)功能

使用 sessionStorage 而不是 localStorage：
將儲(chǔ)存變更為基於會(huì)話（瀏覽器關(guān)閉時(shí)清除）：

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

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

選擇性堅(jiān)持：
只保留狀態(tài)的特定部分：

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;

我建立了一個(gè)簡(jiǎn)單的部落格項(xiàng)目，其中包含react、redux和具有CRUD功能的ant design。你可以去看看。
專案連結(jié) - Redux 部落格應(yīng)用程式

？掌握 Redux Toolkit 並提升您的 React 應(yīng)用程式！

以上是面向 React 開(kāi)發(fā)人員的綜合 Redux 工具包說(shuō)明的詳細(xì)內(nèi)容。更多資訊請(qǐng)關(guān)注PHP中文網(wǎng)其他相關(guān)文章！