React 中的排程

1. React 中的排程是什麼
2. 在 React 中使用 dispatch 函式
3. 在 React 中使用 dispatch() 函式進行遞增和遞減

我們將在 React 中引入 dispatch 並使用 useReducer 和 dispatch 建立一個計數器應用程式來詳細瞭解示例中的 dispatch。

React 中的排程是什麼

我們在 React 應用程式中學習或使用 redux 或 useReducer 時會遇到 dispatch 函式。我們將瞭解什麼是 dispatch 以及如何在 useReducer 中使用它來在 React 中構建一個計數器應用程式。

dispatch 函式依賴於函數語言程式設計，因為它需要切換我們在應用程式中管理資料的思維模型，並且難以理解且複雜。

dispatch() 用於排程操作並觸發儲存的狀態更改。在 React 中管理狀態是我們在 React 中開發網站時面臨的主要問題之一。

useReducer 用於實現它。我們將首先了解 useReducer，然後再討論排程。

我們對 useState 非常熟悉，但 useReducer 也是 React 中管理狀態的原生方式。useReducer 使用 dispatch 而不是 setState。

# react
const [state, setState] = useState(counter);
const [state, dispatch] = useReducer(reducer, counter);

我們將通過一個示例來了解如何在我們的 React 應用程式中使用 dispatch。讓我們使用以下命令建立一個新應用程式。

# react
npx create-react-app my-app

在 React 中建立我們的新應用程式後，我們將使用此命令轉到我們的應用程式目錄。

# react
cd my-app

讓我們執行我們的應用程式來檢查所有依賴項是否都安裝正確。

# react
npm start

我們將在 App.js 中匯入 useReducer 鉤子。

# react
import React, { useReducer } from "react";

一旦我們匯入了 useReducer，我們將進入我們的預設函式。我們將以陣列的形式返回它，而 useReducer 函式將採用兩個不同的引數來啟動。

我們將有一個 reducer，一個我們在狀態上執行以獲取新狀態的函式，我們將在預設函式之前定義它，它也將具有初始值。

我們將使用一個物件作為初始值。我們將設定一個 count 等於 0。這個過程與使用 useState 設定我們的狀態相同。

因此，我們在 App.js 中的程式碼將如下所示。

# react
import "./styles.css";
import React, { useReducer } from "react";

function redcuer(){

}

export default function App() {
  const [] = useReducer(redcuer, { count: 0 })
  return (
    <div className="App">

    </div>
  );
}

上面的程式碼表明我們可以傳入 0 而不是一個物件作為 useReducer 中的初始值。通常，當我們使用 reducer 和 useReducer 時，我們將使用物件而不是實際值，因為通常情況下，我們的狀態比單個值更復雜。

這就是我們使用物件的原因。返回值將分為兩部分；第一部分將是狀態。

因此，我們將使用 state，但如果我們使用單個值作為 useReducer 的初始值，我們可以使用 count。現在，第二部分將是一個函式 dispatch。

在 React 中使用 dispatch 函式

Dispatch 是我們呼叫來更新我們的狀態，它會為我們給定的某些引數呼叫 reducer。另一方面，reducer 也需要 2 個東西。

首先，它將採用當前狀態，即我們應用程式的當前狀態。而 reducer 也會採取行動。

因此，每當我們呼叫 dispatch 時，它都會接受我們呼叫 dispatch 的任何內容，並將其傳送到 action 變數，我們當前的狀態將在一個 state 變數中。reducer 將返回我們新的更新狀態。

我們的程式碼如下所示。

# react
import "./styles.css";
import React, { useReducer } from "react";

function redcuer(state, action){

}

export default function App() {
  const [state, dispatch] = useReducer(redcuer, { count: 0 })
  return (
    <div className="App">

    </div>
  );
}

現在，讓我們通過建立一個前端來測試我們的應用程式。因此，我們將建立 2 個按鈕，1 個用於遞增，另一個用於遞減。

在這些按鈕的中間，我們將顯示 count 的當前狀態。每當使用者點選它們時，這些按鈕將分別呼叫函式 increment 和 decrement。

在我們的 reducer 函式中，我們將計數值增加 1 並返回它。而在 increment 函式中，我們只會呼叫 dispatch() 來更新計數的狀態。

因此，我們在 App.js 中的程式碼將如下所示。

# react
import "./styles.css";
import React, { useReducer } from "react";

function redcuer(state, action){
  return { count: state.count + 1 }
}

export default function App() {
  const [state, dispatch] = useReducer(redcuer, { count: 0 })

  function decrement(){

  }
  function increment(){
    dispatch()
  }
  return (
    <div className="App">
      <button onClick={decrement}>-</button>
      <span>{state.count}</span>
      <button onClick={increment}>+</button>
    </div>
  );
}

輸出：

上面的例子表明我們可以使用 dispatch() 函式輕鬆更新計數狀態。現在我們將瞭解如何擁有不同型別的 dispatch() 並將它們彼此分開。

在 React 中使用 dispatch() 函式進行遞增和遞減

那麼，現在讓我們想象一下，如果我們想使用 dispatch() 同時使用增量和減量，我們將如何使用它？我們可以定義 dispatch 的型別，這可以幫助我們的 reducer 函式了解它是什麼型別的排程，以及如果某個排程型別被啟用，我們的函式必須做什麼。

所以，在我們的 increment 函式中，我們不僅要傳遞一個函式 dispatch，還要定義排程的型別，即增量。我們的函式如下所示。

# react
function increment(){
    dispatch({ type: 'increment' })
  }

一旦我們傳遞了排程型別，我們現在可以在我們的 reducer 函式中使用 switch 語句來檢查動作的型別並相應地執行動作。在 reducer 函式中我們將有三個 switch case，一個是遞增的，一個是遞減的。

最後一個將是預設值。最好有一個預設開關； 我們可以丟擲異常或執行一行程式碼。

我們將在預設情況下返回狀態。我們的 reducer 函式如下所示。

# react
function redcuer(state, action){
  switch(action.type){
    case 'increment':
      return { count: state.count + 1 }
    case 'decrement':
      return { count: state.count - 1 }
    default:
      return state;
  }
}

我們將在 decrement 函式中使用 decrement 型別呼叫排程函式。

# react
function decrement(){
    dispatch({ type: 'decrement' })
  }

讓我們執行我們的應用程式並檢查它是如何工作的。

輸出：

上面的例子表明我們可以很容易地使用 dispatch 來排程特定型別的動作，並使用 useReducer 和 reducer。

在此處檢視完整程式碼。