Redux Toolkit是否支持在组件中以函数式方式基于当前状态更新？

在React的useState中，如果需要基于当前state的值计算新状态，可以使用函数式setState写法，避免因闭包导致的状态过期问题：

const [counter, setCounter] = useState(5)
// 替代直接依赖当前变量的写法：
// setCounter(counter + 1)
// 采用函数式写法获取最新状态：
setCounter((previousState) => previousState + 1)

那么在Redux Toolkit中，是否存在类似的机制？比如能不能在组件中直接这样写：

import { setCounter } from 'features/posSlice'

const MyComponent = () => {
  const dispatch = useDispatch()
  dispatch(setCounter((previousState) => previousState + 1))
}

可能有人会提出「为什么不在reducer里实现逻辑？」比如像这样在slice中定义带逻辑的reducer：

import { createSlice } from '@reduxjs/toolkit'

const posSlice = createSlice({
  name: 'pos',
  initialState: {
    counter: 5
  },
  reducers: {
    incrementBy: (state, { payload }) => {
       state.counter = state.counter + payload
    }
  }
})

但核心需求是：在组件而非slice中，尤其是异步调用场景下，如何获取正确的当前状态并基于它更新，也就是实现上述组件内的函数式更新写法？是否可行？

可行方案：三种实现思路 #

1. 自定义支持函数式更新的Reducer Action

这是最贴近useState函数式写法的方案，我们可以在slice中定义一个接收更新函数的action，让reducer执行这个函数来计算新状态：

import { createSlice } from '@reduxjs/toolkit'

const posSlice = createSlice({
  name: 'pos',
  initialState: {
    counter: 5
  },
  reducers: {
    updateCounter: (state, { payload }) => {
      // payload是一个接收当前counter值的函数，返回新状态
      state.counter = payload(state.counter)
    }
  }
})

export const { updateCounter } = posSlice.actions

然后在组件中就可以像useState那样使用：

import { useDispatch } from 'react-redux'
import { updateCounter } from 'features/posSlice'

const MyComponent = () => {
  const dispatch = useDispatch()

  const handleAsyncIncrement = () => {
    // 模拟异步场景
    setTimeout(() => {
      // 传递更新函数，reducer会用最新的state执行它
      dispatch(updateCounter(prevCounter => prevCounter + 1))
    }, 1000)
  }
}

这种方式能确保更新逻辑基于最新状态执行，完全规避闭包过期问题。

2. 使用createAsyncThunk处理异步更新

如果是异步场景，Redux Toolkit的createAsyncThunk允许你在异步逻辑中直接获取最新的store状态，再执行更新：

import { createSlice, createAsyncThunk } from '@reduxjs/toolkit'

// 定义异步thunk，获取最新状态后更新
export const incrementAfterAsync = createAsyncThunk(
  'pos/incrementAfterAsync',
  async (_, { getState, dispatch }) => {
    // 执行异步操作
    await fetch('/some-api-endpoint')
    // 获取最新状态
    const latestCounter = getState().pos.counter
    // dispatch同步action更新
    dispatch(posSlice.actions.setCounter(latestCounter + 1))
  }
)

const posSlice = createSlice({
  name: 'pos',
  initialState: {
    counter: 5,
    loading: false
  },
  reducers: {
    setCounter: (state, { payload }) => {
      state.counter = payload
    }
  },
  // 可选：处理异步操作的状态变化
  extraReducers: (builder) => {
    builder
      .addCase(incrementAfterAsync.pending, (state) => {
        state.loading = true
      })
      .addCase(incrementAfterAsync.fulfilled, (state) => {
        state.loading = false
      })
  }
})

组件中只需dispatch这个thunk即可：

import { useDispatch } from 'react-redux'
import { incrementAfterAsync } from 'features/posSlice'

const MyComponent = () => {
  const dispatch = useDispatch()

  const handleAsyncIncrement = () => {
    dispatch(incrementAfterAsync())
  }
}

3. 组件内结合useStore获取最新状态（不推荐）

如果不想修改slice，也可以在组件中通过useStore直接获取最新状态，但这种写法不符合Redux的单向数据流原则，仅适合临时场景：

import { useDispatch, useStore } from 'react-redux'
import { setCounter } from 'features/posSlice'

const MyComponent = () => {
  const dispatch = useDispatch()
  const store = useStore()

  const handleAsyncIncrement = () => {
    setTimeout(() => {
      // 直接获取最新状态
      const latestCounter = store.getState().pos.counter
      dispatch(setCounter(latestCounter + 1))
    }, 1000)
  }
}

总结 #

Redux Toolkit本身不支持直接在组件dispatch时传递更新函数，但可以通过自定义函数式更新action或createAsyncThunk实现等价效果，这两种方式都能保证状态更新基于最新值，符合Redux的设计规范。

内容的提问来源于stack exchange，提问作者Islam Y-