Redux Toolkit中users变量始终为undefined的问题求助

我尝试在Redux Toolkit的slice中向state.users添加用户，相关代码如下：

userManagementSlice.js #

import { createSlice } from '@reduxjs/toolkit'

const initialState = {
  users: [],
}

export const userManagementSlice = createSlice({
  name: 'userManagement',
  initialState,
  reducers: {
    addUser: (state, action) => {
      const user = action.payload;
      state.users.push(user);
    },
  },
})

// Action creators are generated for each case reducer function
export const { addUser } = userManagementSlice.actions

export default userManagementSlice.reducer

组件关键代码 #

const [firstName, setFirstName] = useState();
const [lastName, setLastName] = useState();
const users = useSelector((state) => state.users)
const dispatch = useDispatch()

const addUser2 = () => {
    const user = {
        firstName,
        lastName
    }
    dispatch(addUser(user));
}

useEffect(() => {
    console.log('USERS UPDATED: ' + users);

    // reset inputs
    setFirstName('');
    setLastName('');

}, [users]);

configureStore配置 #

import { configureStore } from '@reduxjs/toolkit'
import userManagementReducer from '../features/userManagement/userManagementSlice'

export const store = configureStore({
  reducer: {
    userManagement: userManagementReducer,
  },
})

问题：组件中useEffect打印的users始终为undefined，请问哪里出错了？

错误根源 #

你在组件中通过useSelector((state) => state.users)获取用户列表，但Redux根状态的结构由configureStore中reducer对象的键决定。在你的store配置里，userManagementReducer被挂载在userManagement这个根键下，全局状态的实际结构是：

{
  userManagement: {
    users: []
  }
}

直接访问state.users自然会得到undefined。

修正方案 #

修改组件中的useSelector语句，正确指向userManagement下的users数组：

const users = useSelector((state) => state.userManagement.users)

修改后，组件就能正确获取Redux状态中的用户列表，dispatch添加用户后，useEffect也会正确触发并打印更新后的用户数组。

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