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。

在此处查看完整代码。