why is this redux toolkit users variable always undefined? - reactjs

Question

I'm trying to add a user to state.users in a redux toolkit slice. Here's 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
Here's key code from a component that listens to the users in global state and attempts to add a user to that array via dispatch:
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));
}
However, the USERS UPDATED value logged to the console from the component is always undefined:
useEffect(() => {
console.log('USERS UPDATED: ' + users);
// reset inputs
setFirstName('');
setLastName('');
}, [users]);
Here's the configureStore setup:
import { configureStore } from '#reduxjs/toolkit'
import userManagementReducer from '../features/userManagement/userManagementSlice'
export const store = configureStore({
reducer: {
userManagement: userManagementReducer,
},
})
Any idea what I'm doing wrong here?

Answer 1

You are mounting the slice at userManagement, so your selector would have to be
const users = useSelector((state) => state.userManagement.users)