Невозможно получить доступ к состоянию массива Redux из компонента

Question

Я пытаюсь получить доступ к массиву продуктов Redux из моего компонента списка покупок, и когда я пытаюсь получить доступ к состоянию с помощью this.props.groceries, он возвращает 'undefined'.Я все еще пытаюсь обернуть голову вокруг некоторых концепций Redux, но я думаю, что я действительно близок.В моем store.js я регистрирую

store.subscribe(() => {
    console.log('store changed', store.getState());
});

И getState () отображает мой правильный массив продуктов со всеми продуктами внутри него.Я просто не уверен, как получить доступ к этому состоянию из моего компонента списка покупок.Спасибо!

Обзор моего компонента GroceryList:

        import { connect } from "react-redux";
        import { bindActionCreators, createStore } from 'redux';
        import * as groceryActions from '../../redux/actions/grocery-actions';

        class GroceryList extends Component {
            constructor(props) {
                super(props);
                this.state = {
                };
            }
            addGroceryToList() {
                this.props.addGrocery(newGroceryItem);
                console.log(this.props.groceries); //Logs undefined
            }
            render() {
               return(
                  //something
               )
            }
        }

const mapStateToProps = (state) => ({
    groceries: state.groceries.groceries
});

const mapDispatchToProps = dispatch =>
  bindActionCreators(
    { addGrocery: groceryActions.addGrocery, },
    dispatch
  )

export default connect(mapStateToProps, mapDispatchToProps)(GroceryList);

Действие бакалеи:

let groceryIndex = 0;

export const addGrocery = grocery => dispatch => {
    dispatch({
        type: 'ADD_GROCERY',
        id: groceryIndex++,
        grocery
    });
};

Редуктор бакалеи:

export const groceries = (state = [], action) => {
    switch (action.type) {
        case "ADD_GROCERY":
            return [
                ...state,
                grocery(action.grocery, action),
            ];
        default:
            return state
    }
}

export const grocery = (state, action) => {
    switch (action.type) {
        case "ADD_GROCERY":
            return {
                id: action.id,
                grocery: action.grocery,
            };
        default:
            return state
    }
}

Объединитель редукторов:

import { combineReducers } from 'redux';

import { groceries } from './grocery-reducer';

const reducer = combineReducers({
    groceries: groceries,
});

export default reducer;

Магазин

import { createStore, applyMiddleware, compose } from 'redux';
import thunk from 'redux-thunk';

import reducer from './reducers';

if (typeof window === 'undefined') {
    global.window = {}
}

const enhancer = compose(
    applyMiddleware(thunk),
    window.__REDUX_DEVTOOLS_EXTENSION__
    ? window.__REDUX_DEVTOOLS_EXTENSION__()
    : f => f
);

/* eslint-disable no-underscore-dangle */
const store = createStore(
    reducer,
    {}, // initial state
    enhancer
)

store.subscribe(() => {
    console.log('store changed', store.getState());
});

/* eslint-enable */

export default store

App.js

import { Provider, connect } from 'react-redux';
import { bindActionCreators } from "redux";
import * as groceryActions from "./src/redux/actions/grocery-actions";
import store from './src/redux/store';

class App extends React.Component {
    state = {
    };

    render() {
        return (
            <Provider store={store}>
                <Layout />
            </Provider>
        );
    }
}

export default (App);