Redux Toolkit中如何在reducer内访问根状态(root state)？

createSlice 定义的普通reducer默认只能访问当前slice对应的切片状态，无法直接获取根状态，这是Redux的设计规范决定的：单个slice reducer仅负责自身状态域的更新，保证职责单一、可测试。你可以通过以下两种常用方式实现需求：

• 方案1：使用createAsyncThunk封装逻辑（适合需要跨切片读取状态的场景）
  createAsyncThunk 提供的API可以直接调用getState()获取完整根状态，示例代码如下：

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

// 定义thunk，第二个参数的api中包含getState方法
export const incrementWithRootState = createAsyncThunk(
  'counter/incrementWithRootState',
  async (_, { getState }) => {
    const rootState = getState()
    // 此处可读取根状态下任意切片的值，例如rootState.user.info、rootState.setting.theme等
    // 可根据根状态的值做逻辑判断，返回需要的参数给reducer处理
    return
  }
)

const initialState = {
  value: 1
}

export const counterSlice = createSlice({
  name: "counter",
  initialState,
  reducers: {
    increment: (state) => {
      state.value++
    }
  },
  // 处理thunk触发的action
  extraReducers: (builder) => {
    builder.addCase(incrementWithRootState.fulfilled, (state) => {
      // 此处可接收thunk返回的payload做自定义处理
      state.value++
    })
  }
})

// 组件内使用时直接dispatch该thunk即可
// dispatch(incrementWithRootState())

• 方案2：dispatch时传入需要的根状态值（更轻量，适合依赖的外部状态少的场景）
  你可以在触发action的组件侧先拿到根状态中需要的字段，作为payload传入action即可：
  首先修改slice的reducer定义：

export const counterSlice = createSlice({
  name: "counter",
  initialState,
  reducers: {
    increment: (state, action) => {
      // action.payload就是外部传入的根状态相关字段
      const { otherSliceValue } = action.payload
      // 可基于传入的外部值做逻辑判断再更新当前状态
      state.value++
    }
  }
})

组件内使用示例：

import { useSelector, useDispatch } from 'react-redux'
import { increment } from './counterSlice'

function Counter() {
  const dispatch = useDispatch()
  // 先从根状态拿到需要的其他切片值
  const otherSliceValue = useSelector(state => state.otherSlice.xxx)

  const handleClick = () => {
    // 将需要的值作为payload传入action
    dispatch(increment({ otherSliceValue }))
  }

  return <button onClick={handleClick}>加1</button>
}

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