將 Redux Toolkit 與 React 結合使用：簡單指南

Redux Toolkit 是官方推薦的編寫 Redux 邏輯的方法。它為開箱即用的商店設置提供了良好的預設設置，並包含最常用的內建 Redux 插件。在本部落格中，我們將介紹將 Redux Toolkit 與 React 應用程式整合的基礎知識。

什麼是 Redux 工具包？

Redux Toolkit 是一組有助於簡化撰寫 Redux 邏輯流程的工具。它包含用於簡化常見用例的實用程序，例如儲存設定、建立減速器和編寫不可變的更新邏輯。

---

使用 React 設定 Redux 工具包

讓我們完成在 React 應用程式中設定 Redux Toolkit 的步驟。

第 1 步：安裝依賴項

首先，您需要安裝必要的軟體包。您可以使用 npm 或yarn 來完成此操作。

npm install @reduxjs/toolkit react-redux

第 2 步：建立 Redux Store

store 是賦予 Redux 生命的物件。透過 Redux Toolkit，您可以使用 configureStore 函數建立一個 store。

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

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

export default store;

第 3 步：建立切片

切片是應用程式單一功能的 Redux 減速器邏輯和操作的集合。 Redux Toolkit 的 createSlice 函數會自動產生動作建立者和動作類型。

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

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

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

export default counterSlice.reducer;

步驟 4：為您的 React 應用程式提供 Store

要讓 Redux 儲存空間可供您的 React 元件使用，您需要使用 React-redux 中的 Provider 元件。

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

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

步驟 5：將 React 元件連接到 Redux Store

要將 React 元件連接到 Redux 存儲，您可以使用 React-redux 中的 useSelector 和 useDispatch 鉤子。

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

function 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>
    </div>
  );
}

export default Counter;

第 6 步：在您的應用程式中使用連接的元件

最後，您可以在應用程式中使用連接的元件。

// src/App.js
import Counter from './components/Counter';

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

export default App;

---

結論

遵循這些步驟，您可以在 React 應用程式中設定 Redux Toolkit，以可預測且可維護的方式管理狀態。 Redux Toolkit 簡化了使用 Redux 時的許多常見任務，使編寫和維護 Redux 邏輯變得更加容易。

---

進一步探索

對於那些想要深入了解 Redux Toolkit 和 React 的人，這裡有一些寶貴的資源：

• Redux Toolkit 文件：官方文件提供了全面的指南和 API 參考。
  • Redux 工具包文件
• React Redux 文件：了解有關如何將 Redux 與 React 結合使用的更多資訊。
  • React Redux 文件
• Redux Essentials 教學：幫助您啟動並執行 Redux Toolkit 的逐步教學。
  • Redux 基礎教學
• Redux 基礎教學：涵蓋 Redux 核心概念的詳細教學。
  • Redux 基礎教學

感謝您的閱讀！
寶。

以上是將 Redux Toolkit 與 React 結合使用：簡單指南的詳細內容。更多資訊請關注PHP中文網其他相關文章！