大白话详细解读React框架中的action

在 React 和 Redux 的生态中，Action 是一个非常重要的概念。用大白话来说，Action 就是一个“动作”或“事件”，它描述了“发生了什么”。比如，用户点击了一个按钮、数据加载完成、或者表单提交成功，这些都可以用 Action 来表示。

1. Action 的本质

Action 是一个普通的 JavaScript 对象，它必须包含一个 type 字段，用来描述这个动作的类型。除此之外，Action 还可以携带一些额外的数据（称为 payload），用来传递信息。

举个例子：

{
  type: 'ADD_TODO',       // 动作类型：添加一个待办事项
  payload: 'Learn Redux'  // 额外的数据：待办事项的内容
}

这个 Action 的意思是：“我要添加一个待办事项，内容是 Learn Redux”。

2. Action 的作用

Action 的作用是告诉 Redux：“发生了什么事情，需要更新状态”。Redux 会根据 Action 的类型和携带的数据，来决定如何更新应用的状态。

举个例子：

• 用户点击“添加待办事项”按钮时，会触发一个 ADD_TODO 的 Action。

• Redux 接收到这个 Action 后，会根据它的内容（比如 payload: 'Learn Redux'）来更新状态，添加一个新的待办事项。

3. Action 是如何被触发的？

在 React 中，Action 通常是通过 Action Creator 来创建的。Action Creator 是一个函数，它返回一个 Action 对象。

举个例子：

// Action Creator：创建一个添加待办事项的 Action
const addTodo = (text) => {
  return {
    type: 'ADD_TODO',
    payload: text
  };
};

当用户点击按钮时，可以调用这个 Action Creator 来触发 Action：

// 用户点击按钮时
dispatch(addTodo('Learn Redux'));

4. Action 和 Redux 的关系

• Action 是 Redux 中的“事件”，它描述了“发生了什么”。

• Reducer 是 Redux 中的“处理器”，它根据 Action 的类型和内容，来决定如何更新状态。

• Store 是 Redux 中的“状态容器”，它保存了整个应用的状态。

整个过程可以简单理解为：

1. 用户触发了一个动作（比如点击按钮）。

2. 这个动作会创建一个 Action（比如 { type: 'ADD_TODO', payload: 'Learn Redux' }）。

3. Action 被发送到 Redux Store。

4. Redux Store 调用 Reducer，根据 Action 更新状态。

5. 状态更新后，React 组件重新渲染，显示最新的数据。

5. 一个完整的例子

假设我们有一个简单的待办事项应用，用户可以添加待办事项。以下是 Action 的使用流程：

(1) 定义 Action 类型

const ADD_TODO = 'ADD_TODO';  // 添加待办事项的动作类型

(2) 创建 Action Creator

const addTodo = (text) => {
  return {
    type: ADD_TODO,
    payload: text
  };
};

(3) 在组件中触发 Action

import React from 'react';
import { useDispatch } from 'react-redux';
import { addTodo } from './actions';

const TodoForm = () => {
  const dispatch = useDispatch();

  const handleSubmit = (text) => {
    dispatch(addTodo(text));  // 触发 Action
  };

  return (
    <div>
      <input type="text" placeholder="Enter a todo" />
      <button onClick={() => handleSubmit('Learn Redux')}>Add Todo</button>
    </div>
  );
};

export default TodoForm;

(4) Reducer 处理 Action

const initialState = {
  todos: []
};

const todoReducer = (state = initialState, action) => {
  switch (action.type) {
    case ADD_TODO:
      return {
        ...state,
        todos: [...state.todos, action.payload]  // 更新状态
      };
    default:
      return state;
  }
};

export default todoReducer;

6. 总结

• Action 就是一个“动作”或“事件”，它描述了“发生了什么”。

• Action 必须有一个 type 字段，用来表示动作的类型。

• Action 还可以携带额外的数据（payload），用来传递信息。

• Action 是通过 Action Creator 创建的，并通过 dispatch 发送给 Redux Store。

• Redux Store 会根据 Action 的类型和内容，调用 Reducer 来更新状态。

用大白话来说，Action 就像是 Redux 中的“消息”或“指令”，它告诉 Redux：“这里发生了一件事，请根据这件事更新状态！”