Redux Toolkit中useSelector如何通过reducer关联slice的initialState？

我正试图理解为何通过代码const count = useSelector((state) => state.counter.value)能获取slice中定义的initialState。我的疑惑是：slice默认仅导出counterSlice.reducer，那上述useSelector代码是如何关联到slice的initialState的？

相关代码示例 #

Slice代码 #

import { createSlice } from '@reduxjs/toolkit'

const initialState = {
  value: 0,
}

export const counterSlice = createSlice({
  name: 'counter',
  initialState,
  reducers: {
    increment: (state) => {
      // Redux Toolkit允许在reducer中编写“可变”逻辑，实际通过Immer库生成新的不可变状态
      state.value += 1
    },
    decrement: (state) => {
      state.value -= 1
    },
    incrementByAmount: (state, action) => {
      state.value += action.payload
    },
  },
})

export const { increment, decrement, incrementByAmount } = counterSlice.actions

export default counterSlice.reducer

Store代码 #

import { configureStore } from '@reduxjs/toolkit'
import counterReducer from '../features/counter/counterSlice'

export const store = configureStore({
  reducer: {
    counter: counterReducer,
  },
})

组件代码 #

...
export function Counter() {
  const count = useSelector((state) => state.counter.value)
  const dispatch = useDispatch()

  return (
    <div>
     ...
    </div>
  )
}

• Reducer内部已集成initialState逻辑：createSlice生成的reducer不是单纯的业务处理函数，它内置了初始化规则——当Redux store首次启动时，会调用所有reducer并传入undefined作为初始state，此时这个reducer会自动返回你在slice中定义的initialState。所以你导出的counterSlice.reducer其实是一个包含了初始状态信息的完整处理函数，不是孤立的逻辑片段。

• Store为reducer绑定状态树命名空间：在configureStore配置里，你把counterReducer挂载到了reducer对象的counter键下。这就确定了Redux全局状态树的结构：counter字段对应的就是counterReducer管理的状态分支，而这个分支的初始值就是slice里的initialState。

• useSelector从全局状态树直接取值：useSelector的回调参数接收整个Redux全局状态树，state.counter.value是先定位到counterReducer管理的状态分支，再取出其中的value字段——而这个分支的初始值正是你在slice里定义的initialState，所以能直接获取到对应的数值。

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