如何使用Redux useDispatch传参？及RTK切片配置传参Action方法

代码错误修复 #

你的代码存在两处关键错误：

1. 切片中reducer函数参数格式错误：Redux Toolkit的reducer函数第一个参数是state，第二个才是包含传递数据的action对象，你仅定义了一个参数，导致Action Creator被错误生成（期望接收0个参数），无法正确获取传递的值。
2. 组件中useDispatch调用方式错误：useDispatch是用来获取dispatch函数，而非直接传入Action，正确流程是先获取dispatch，再调用它传入生成的Action。

修正后的切片代码 #

import { createSlice } from '@reduxjs/toolkit'

// 修正：添加const关键字
export const tempSlice = createSlice({
  name: "temp",
  initialState: {
    value: 1
  },
  reducers: {
    // 修正：接收state和action两个参数
    updateTemp: (state, action) => {
      console.log(action.payload) // 此处获取传递的newData
      // 如需更新state，直接修改即可（Immer自动处理不可变更新）
      state.value = action.payload
    }
  }
})

export const { updateTemp } = tempSlice.actions

export default tempSlice.reducer

修正后的组件调用代码 #

import { useDispatch } from 'react-redux'
import { updateTemp } from './tempSlice'

// 组件内部逻辑
const dispatch = useDispatch()
// 触发更新时的正确写法
dispatch(updateTemp(newData))

问题解答 #

1. 如何使用Redux的useDispatch传递参数？ #

• useDispatch的作用是获取Redux的dispatch函数，本身不直接传递参数。传递参数的核心方式是：调用Action Creator（如updateTemp）时传入参数，生成包含payload的Action，再将这个Action传给dispatch函数。
• 核心流程：获取dispatch函数 → 调用Action Creator并传入参数 → 将生成的Action传给dispatch

2. 如何在@reduxjs/toolkit切片中配置Action以实现数据传递？ #

• 在createSlice的reducers字段中，每个reducer函数必须接收state和action两个参数：
  • state：当前切片的状态对象
  • action：包含type和payload的对象，payload就是你传递的参数
• Redux Toolkit会自动为每个reducer生成对应的Action Creator，调用该Creator时传入的参数会自动作为action.payload被reducer接收，无需手动编写Action类型和Creator函数。

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