？ Redux 工具包注釋？

Redux 是什么？
Redux 是 JS 應(yīng)用程序的靈活狀態(tài)容器，可以單獨(dú)管理我們的應(yīng)用程序狀態(tài)。它在單個存儲中管理應(yīng)用程序狀態(tài)，從而更輕松地處理整個應(yīng)用程序中的復(fù)雜狀態(tài)邏輯。

為什么要 Redux？
在正常流程中，我們需要進(jìn)行道具鉆探以在組件之間傳遞狀態(tài)。有些級別不需要這里的狀態(tài)，這是一種負(fù)擔(dān)。此外，提升大型中型應(yīng)用程序的狀態(tài)并不是一個可擴(kuò)展的解決方案，因?yàn)樗枰M(jìn)行結(jié)構(gòu)性更改。這就是為什么我們需要 redux 來管理狀態(tài)。這里的所有狀態(tài)都保存在存儲中，無論哪個組件需要，它們都可以訂閱該存儲。 Redux 通過強(qiáng)制執(zhí)行單向數(shù)據(jù)流來確?？深A(yù)測的狀態(tài)管理、更輕松的調(diào)試并提高可擴(kuò)展性。

Redux 核心組件：

操作： 描述發(fā)生的事情的對象。它通常包含一個類型和一個可選的有效負(fù)載。 （命令）
調(diào)度： 用于向存儲發(fā)送操作以更新狀態(tài)的函數(shù)。 （事件發(fā)生）
Reducer： 一個純函數(shù)，它接受當(dāng)前狀態(tài)和一個操作，然后返回一個新狀態(tài)。 （動作調(diào)度時觸發(fā)的函數(shù)）

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

Redux 工作流程：

創(chuàng)建切片：
切片是單個功能的 Redux 減速器邏輯和操作的集合。準(zhǔn)備回調(diào)允許我們在操作有效負(fù)載到達(dá)減速器之前對其進(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;

正在創(chuàng)建商店：

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 調(diào)用）是使用中間件處理的，因?yàn)?Redux 默認(rèn)情況下僅支持同步狀態(tài)更新。用于處理異步操作的最常見中間件是 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 中的中間件攔截分派的操作，允許日志記錄、崩潰報告或處理異步邏輯。中間件讓我們可以自定義調(diào)度過程。

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

選擇器
選擇器有助于訪問該州的特定部分。

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

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

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 查詢（簡化數(shù)據(jù)獲取）

RTK 查詢簡化了數(shù)據(jù)獲取、緩存和同步。 RTK 查詢自動緩存請求并避免不必要的重新獲取，從而提高性能。

設(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 允許我們編寫直接“改變”狀態(tài)的邏輯，同時保持更新在幕后不可變。

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ù)。例如，修改對象或數(shù)組。
不可變：我們不是直接修改數(shù)據(jù)，而是創(chuàng)建一個應(yīng)用更改的新副本，保持原始數(shù)據(jù)不變。

Immer 的工作原理
Immer 幫助我們編寫看起來像是在改變數(shù)據(jù)的代碼（即直接更改數(shù)據(jù)），但它會自動使更改在幕后保持不變。這對于在處理 JavaScript 中的不可變數(shù)據(jù)結(jié)構(gòu)時避免常見錯誤很有用。
示例：沒有 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)槲覀儾槐厥謩涌寺『透聽顟B(tài)； Immer 自動為我們做這件事。

Redux 持久化：

為了在頁面刷新時保持 Redux 狀態(tài)，我們可以集成 Redux Persist。這會將您的 Redux 狀態(tài)存儲在本地存儲或會話存儲中，并在刷新應(yīng)用程序時重新加載它。

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

可選增強(qiáng)功能

使用 sessionStorage 而不是 localStorage：
將存儲更改為基于會話（瀏覽器關(guān)閉時清除）：

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;

我創(chuàng)建了一個簡單的博客項(xiàng)目，其中包含react、redux和具有CRUD功能的ant design。你可以去看看。
項(xiàng)目鏈接 - Redux 博客應(yīng)用

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

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