在 Redux 中调度两个动作

在 Redux 中，我们可以通过 dispatch 函数来发出一个 action，从而触发一个状态改变的过程。在这篇文章中，我们将介绍如何对 Redux 应用程序进行状态管理并调度两个动作。

Redux 简介

Redux 是一个用于 JavaScript 应用程序的可预测状态容器。Redux 的开发初衷是为了管理 React 应用程序中的状态。它提供了一种简单而强大的方式来跟踪应用程序中的状态。

Redux 工作流程如下：

• 当用户与应用程序交互时，例如通过点击按钮或输入文本，我们需要发出一个表示该事件的动作。
• 然后，在 Redux Store 中更新该动作对应的状态。
• 一旦状态被更新，就会通知应用程序中的所有组件进行重新渲染。

这种工作流程使得 Redux 应用程序易于维护和扩展。

Redux 中的动作调度

在 Redux 中，我们可以通过 dispatch 函数来发出一个 action。action 是一个对象，它描述了我们希望发生的状态改变。

例如，我们可以创建一个 action 来表示用户单击了一个按钮：

{
  type: 'BUTTON_CLICKED',
  payload: {
    buttonName: 'submit'
  }
}

在这个例子中，我们的 action 有两个属性：type 和 payload。type 属性是一个字符串，用于描述这个动作的类型，而 payload 属性则可以包含任何我们需要传递的数据。

我们可以将这个 action 发送到 Redux Store 中，让它更新状态：

store.dispatch({
  type: 'BUTTON_CLICKED',
  payload: {
    buttonName: 'submit'
  }
});

这将触发一个状态更新过程，Redux Store 将根据 action 的类型和 payload 属性更新状态。一旦状态被更新，所有与该状态相关的组件都将重新渲染。

我们可以创建多个 action 来描述应用程序中的不同事件。例如，我们可以创建一个 action 来表示用户正在输入文本：

{
  type: 'TEXT_INPUT',
  payload: {
    userInput: 'Hello world!'
  }
}

我们可以通过调度多个 action 来对应多种场景，不同的 action 将导致不同的状态改变。

示例代码

下面是一个简单的示例代码，展示了如何在 Redux 中调度两个动作：

import { createStore } from 'redux';

// 定义初始状态
const initialState = {
  buttonText: 'Click me',
  userInput: ''
};

// 定义 reducer
function reducer(state = initialState, action) {
  switch (action.type) {
    case 'BUTTON_CLICKED':
      return Object.assign({}, state, {
        buttonText: 'Button clicked'
      });
    case 'TEXT_INPUT':
      return Object.assign({}, state, {
        userInput: action.payload.userInput
      });
    default:
      return state;
  }
}

// 创建 Redux Store
const store = createStore(reducer);

// 监听状态变化
store.subscribe(() => {
  console.log('New state:', store.getState());
});

// 发送动作
store.dispatch({
  type: 'BUTTON_CLICKED',
});

store.dispatch({
  type: 'TEXT_INPUT',
  payload: {
    userInput: 'Hello world!'
  }
});

在这个示例中，我们定义了两个动作：BUTTON_CLICKED 和 TEXT_INPUT。我们使用 createStore 函数创建了一个 Redux Store，并定义了一个 reducer 函数来处理这两个动作。我们还使用了 subscribe 函数来监听状态变化，以便在状态更新时可以看到最新的状态。最后，我们使用 dispatch 函数调度两个动作。

运行这段代码将得到以下输出：

New state: { buttonText: 'Button clicked', userInput: '' }
New state: { buttonText: 'Button clicked', userInput: 'Hello world!' }

这表明状态已经成功更新，Redux Store 可以根据动作类型和有效负载更新状态。

结论

在 Redux 中调度动作是一种强大的状态管理技术，在应用程序中实现可预测的状态管理。我们可以使用 dispatch 函数来发出一个 action，并让 Redux Store 更新状态。本文展示了如何使用两个示例动作来演示 Redux 的工作流程。