TypeError: Невозможно прочитать свойство 'map' из неопределенного, но моя переменная - пустой массив

Question

У меня есть эта переменная с именем "groups", которая получает значения из хранилища редуксов:

const groups = useSelector(state => state.groupPermissionsStates.groups);

Мой редуктор инициализирует эту переменную пустым массивом:

const INITIAL_STATE = {
    groups: [],
    lastPage: 1
}

const groupPermissionsStates = (state = INITIAL_STATE, action) => {
    switch (action.type) {
        case "REQUEST_GET_GROUPS_PERMISSIONS":
            return {
                ...state,
                groups: action.payload.data,
                lastPage: action.payload.lastPage
            }
            case "CLEAR_GROUPS_PERMISSIONS_LIST":
                return {
                    ...state,
                    groups: [],
                    lastPage: 1
                }
            default:
                return state
    }
}

export default groupPermissionsStates;

В моем шаблоне я делаю group.map() до go через этот массив, но я получаю:

TypeError: Невозможно прочитать свойство 'map' из неопределенного

Я проверяю, меняет ли эта переменная ваше значение, используя useEffect, но выводит только один раз, а ваше значение представляет собой пустой массив:

useEffect(() => {
    console.log(groups)
}, [groups]); // eslint-disable-line

Когда я ставлю { groups && groups.map(group => ( вместо

{ groups.map(group => (

Я не получаю эту ошибку и моя страница запускается.

Это мой магазин загружается после монтирования моего компонента? У меня есть другой компонент, который я раньше не использовал, и он работает нормально:

{users.map(user => (

И это пользователи - переменная, в которой ваш код основан в хранилище с избыточностью:

const users = useSelector(state => state.userStates.users);

Я не вижу никакой разницы между этими двумя компонентами, за исключением того, что компонент, использующий переменную users, имеет useEffect(), который отправляет запрос на мой сервер и возвращает заполненный пользовательский массив.

@ Ред .:

Это мой root редуктор:

import userStates from '../modules/users/user.reducer'
import groupPermissionsStates from './group-permissions/group-permissions.reducer'

import { combineReducers } from 'redux'

const rootReducer = combineReducers({
    groupPermissionsStates
    userStates
})

Создание моего магазина:

    import { createStore, applyMiddleware } from 'redux';
    import createSagaMiddleware from 'redux-saga';
    import rootReducer from './modules/rootReducer';
    import rootSaga from './modules/rootSaga';


    const sagaMiddleware = createSagaMiddleware();
    const enhancer =
      process.env.NODE_ENV === 'development'
        ? applyMiddleware(sagaMiddleware)
        : applyMiddleware(sagaMiddleware);
    const store = createStore(rootReducer, enhancer);
    sagaMiddleware.run(rootSaga);
    export default store;

Мой индекс. js:

ReactDOM.render(
    <Provider store={store}>
        <SnackbarProvider autoHideDuration={3500} maxSnack={3}>
            <Notifier />
            <AppRouter/>
        </SnackbarProvider>
    </Provider>, document.getElementById('root'));

serviceWorker.unregister();

Моя карта:

{ groups.map(group => (
    <TableRow key={group.id}>
        <TableCell component="th" scope="row">
            {group.name}
        </TableCell>
        <TableCell align="right">
            {group.inactive === false
                ? "Sim"
                : "Não"}
        </TableCell>
        <TableCell align="right">
            <IconButton
                color="primary"
                aria-label="editar"
                onClick={() => editGroup(group)}
            >
                <EditIcon />
            </IconButton>
        </TableCell>
    </TableRow>
))}