Redux中dispatch函数的作用是什么？——基于MERN栈教程场景

在Redux体系里，dispatch就是你给store传递“状态更新指令”的唯一入口——所有状态变更都得靠它把action对象传给store，store再调用对应的reducer来修改全局状态。

看你贴的login异步action代码，这里的三次dispatch各司其职：

• 第一次dispatch({ type: USER_LOGIN_REQUEST })
  发起登录请求前先给store发这个action，目的是让store把状态标记为“正在登录中”。UI层拿到这个状态后，就能做加载提示，比如把登录按钮改成不可点击的加载状态，避免用户重复提交。

• 登录请求成功拿到数据后，dispatch({ type: USER_LOGIN_SUCCESS, payload: data })
  把后端返回的用户数据通过payload传给store，reducer收到这个action后，会把用户信息存入Redux全局状态。这样应用里任何需要用户数据的组件，都能直接从Redux状态中获取。同时这里把数据存入localStorage，是为了页面刷新后还能保留登录状态。

• 请求失败时，dispatch({ type: USER_LOGIN_FAIL, payload: 错误信息 })
  把错误信息传给store，reducer会把错误状态存起来，UI就能拿到这个错误信息展示给用户，比如弹出“邮箱或密码错误”的提示。

附中文注释版代码：

import axios from 'axios'
// 导入登录相关的action类型常量
import { USER_LOGIN_FAIL, USER_LOGIN_REQUEST, USER_LOGIN_SUCCESS } from '../constants/userConstants'

// 定义登录异步action，返回接收dispatch的函数（Redux Thunk用法，支持异步操作）
export const login = (email, password) => async (dispatch) => {
  try {
    // 触发"登录请求中"的action，标记加载状态
    dispatch({
      type: USER_LOGIN_REQUEST
    })

    // 配置请求头，告知后端发送的是JSON格式数据
    const config = {
      headers: {
        'Content-Type': 'application/json'
      }
    }
    // 发送登录请求，解构获取后端返回的用户数据
    const { data } = await axios.post('/api/users/login', {email, password}, config)

    // 触发"登录成功"的action，将用户数据传递给store
    dispatch({
      type: USER_LOGIN_SUCCESS,
      payload: data
    })

    // 将用户数据存入本地存储，实现登录状态持久化
    localStorage.setItem('userInfo', JSON.stringify(data))
  } catch (error) {
    // 触发"登录失败"的action，传递错误信息
    dispatch({
      type: USER_LOGIN_FAIL,
      payload:
        // 优先使用后端返回的自定义错误信息，无则用axios自带错误信息
        error.response && error.response.data.message ? error.response.data.message : error.message,
    })
  }
}

内容的提问来源于stack exchange，提问作者Dagmawi