Odtnhj

I'm trying to access my Redux groceries array from my grocery list component, and when I try to access the state with this.props.groceries, it returns 'undefined'. I'm still trying to wrap my head around some Redux concepts, but I think I'm really close. In my store.js, I'm logging

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

And getState() is displaying my correct groceries array, with all the groceries inside it. I'm just not sure how to access this state from my groceries list component. Thanks!

Overview of my GroceryList component:

 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);

Grocery action:

let groceryIndex = 0;

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

Grocery reducer:

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
 

Reducer combiner:

import combineReducers from 'redux';

import groceries from './grocery-reducer';

const reducer = combineReducers(
 groceries: groceries,
);

export default reducer;

Store

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);