完整的 Redux 工具包（第 1 部分）

Redux 工具包的用途

我們已經知道 redux 是 JavaScript 應用程式的一個強大的狀態管理函式庫，特別是在使用 React 時。
但是使用 redux 很困難，因為它設定 redux 的程式碼很繁重。這使得維護和調試變得困難。這就是 Redux Toolkit 可以提供幫助的地方。
Redux 工具包解決的問題

• 開店太複雜了。
• 添加許多套件以與 redux 一起使用，例如中間件、工具。
• Redux 需要太多程式碼來設定

Redux 工具包是官方推薦的編寫 redux 邏輯的方法。它提供了一組工具來簡化開發，減少樣板程式碼，有助於提高應用程式的可擴展性和可維護性。

Redux 工具包的主要優點：

1. 更少的樣板程式碼：不再需要動作創建者和常數。
2. 簡化的商店設定：提供單一 API 來使用合理的預設值來配置商店。
3. 內建對不變性和 DevTools 的支援：自動啟用 Redux DevTools 並與 Immer 整合以實現不變性。
4. 更好的 TypeScript 支援：提供更好的打字效果並與 TypeScript 整合良好。

我們可以將 redux 工具包與任何 javascript 庫一起使用，因此我們使用 React 設定 redux 工具包。

在 React 應用程式中設定 Redux 工具包

第 1 步：建立一個新的 React 專案

首先，讓我們建立一個新的 React 應用程式。您可以使用 create-react-app 或 Vite 來實現此目的。為了簡單起見，我們將在這裡使用 create-react-app。

npx create-react-app redux-toolkit-example
cd redux-toolkit-example

第 2 步：安裝 Redux 工具包和 React-Redux

接下來，安裝必要的軟體包：@reduxjs/toolkit 和react-redux。

npm install @reduxjs/toolkit react-redux

1. 了解切片和減速器

切片是針對應用程式特定功能的 Redux 減速器邏輯和操作的集合。 Redux Toolkit 提供了 createSlice 函數來幫助使用最少的樣板建立狀態切片。

第 1 步：建立切片
讓我們建立一個簡單的計數器切片。在 features/counter 目錄中建立一個名為 counterSlice.js 的新檔案：

// src/features/counter/counterSlice.js
import { createSlice } from '@reduxjs/toolkit';

const initialState = {
  value: 0,
};

const counterSlice = createSlice({
  name: 'counter',
  initialState,
  reducers: {
    increment: (state) => {
      state.value += 1;
    },
    decrement: (state) => {
      state.value -= 1;
    },
    incrementByAmount: (state, action) => {
      state.value += action.payload;
    },
  },
});

export const { increment, decrement, incrementByAmount } = counterSlice.actions;
export default counterSlice.reducer;

在這裡，我們定義了一個名為 counter 的切片，它具有初始狀態和三個減速器（increment、decrement 和incrementByAmount）。 createSlice 函數會自動為每個reducer 函數產生動作建立者。

1. 設定 Redux 儲存

現在我們有了切片，讓我們來設定 Redux 儲存。 Redux Toolkit 提供了一個 configureStore 函數，可以使用良好的預設值來設定儲存。

第 1 步：建立商店
在應用程式目錄中建立 store.js 檔案：

// src/app/store.js
import { configureStore } from '@reduxjs/toolkit';
import counterReducer from '../features/counter/counterSlice';

const store = configureStore({
  reducer: {
    counter: counterReducer,
  },
});

export default store;

第 2 步：為您的應用程式提供商店
將您的 React 應用程式包裝在react-redux 的元件中並將其傳遞給商店。更新index.js檔：

// src/index.js
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import { Provider } from 'react-redux';
import store from './app/store';

ReactDOM.render(
  <React.StrictMode>
    <Provider store={store}>
      <App />
    </Provider>
  </React.StrictMode>,
  document.getElementById('root')
);

1. 將組件連接到商店

要與 Redux 儲存交互，請使用react-redux 提供的 useSelector 和 useDispatch 鉤子。
第 1 步：使用 useSelector
存取狀態 使用 useSelector 鉤子從 store 存取狀態

// src/features/counter/Counter.js
import React from 'react';
import { useSelector, useDispatch } from 'react-redux';
import { increment, decrement, incrementByAmount } from './counterSlice';

const Counter = () => {
  const count = useSelector((state) => state.counter.value);
  const dispatch = useDispatch();

  return (
    <div>
      <h1>{count}</h1>
      <button onClick={() => dispatch(increment())}>Increment</button>
      <button onClick={() => dispatch(decrement())}>Decrement</button>
      <button onClick={() => dispatch(incrementByAmount(5))}>Increment by 5</button>
    </div>
  );
};

export default Counter;

第 2 步：在您的應用中使用計數器元件
在主應用程式元件中匯入並使用 Counter 元件：

// src/App.js
import React from 'react';
import Counter from './features/counter/Counter';

function App() {
  return (
    <div className="App">
      <Counter />
    </div>
  );
}

export default App;

1. 結論與後續步驟

在這一部分中，我們介紹了在 React 應用程式中設定 Redux Toolkit 的基礎知識，包括建立切片、配置儲存以及使用鉤子將元件連接到 Redux 儲存。在下一部分中，我們將深入研究使用 createAsyncThunk 處理非同步邏輯，以從 API 取得資料並管理不同的載入狀態。

敬請關注第 2 部分：高級 Redux 工具包 - 使用 createAsyncThunk 的非同步邏輯！

以上是完整的 Redux 工具包（第 1 部分）的詳細內容。更多資訊請關注PHP中文網其他相關文章！