Redux Toolkit中Action的payload与meta有何区别？

一、payload 和 meta 的核心区别 #

• payload：存储业务核心数据，是用来更新状态的主要内容。对于createAsyncThunk来说，就是异步函数里return的结果（请求成功时）；普通createAction里，就是dispatch时传入的参数。
• meta：存储辅助元数据，和业务逻辑无关，用来记录请求的上下文信息。比如createAsyncThunk生成的action里，meta包含：
  • arg：dispatch这个thunk时传入的参数（比如你代码里的event.target.value）
  • requestId：请求的唯一标识
  • requestStatus：请求状态（fulfilled/pending/rejected）
  • 其他重试、缓存相关的辅助信息

二、结合你的代码分析问题 #

1. 异步请求的语法错误 #

你这段templateGetOne里，axios请求没加await，导致response是Promise对象，后面await response.data会报错，正确写法：

const templateGetOne = createAsyncThunk('template/check/code', async (code) => {
  // 必须加await，否则response是Promise实例
  const response = await axios.get(`${api}/temp/info?template_code=${code}`)
  const data = response.data // axios返回的response.data已经是解析后的JSON，无需再await
  console.log('response data>>>>', data)
  return data
})

2. Reducer中错误使用meta #

你在templateGetOne.fulfilled的Reducer里把state.code赋值为action.meta，这完全搞错了：

• 要获取接口返回的业务数据，用action.payload（也就是你async函数return的data）
• 要获取用户输入的code参数，用action.meta.arg（也就是dispatch时传入的event.target.value）

正确的Reducer写法（根据需求二选一）：

builder.addCase(templateGetOne.fulfilled, (state, action) => {
  // 场景1：存储接口返回的完整数据
  state.templateInfo = action.payload
  
  // 场景2：存储用户输入的code参数
  state.inputCode = action.meta.arg
  
  console.log('接口返回数据: ', action.payload)
  console.log('用户传入的code: ', action.meta.arg)
  console.log('完整meta信息: ', action.meta)
})

三、使用场景总结 #

• 用payload：
  • 所有需要更新业务状态的数据（比如接口返回的列表、详情、表单提交结果）
  • 同步action里传递的核心业务参数（比如修改某个开关的布尔值）
• 用meta：
  • 需要记录请求上下文的场景（比如日志埋点、请求重试、缓存校验）
  • 非业务逻辑的辅助数据（比如跟踪action的触发来源）

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