Redux props are being received in Redux DevTools but not in the React component

Question

I am passing down a Redux prop to a component that is sourced from a fetch payload. The payload successfully changes state in my reducer and according to my Redux DevTools the component that I am trying to pass the state down to as a prop successfully receives the prop (an array of objects that is fetched in the action) yet when I console.log the prop or try to do anything with it it shows up as an empty array.

My index reducer:

export default combineReducers({
  cart: cartitemReducer,
  products: productReducer,
})

The fetch action:

export const fetchCart = () => dispatch => {
  fetch('http://localhost:3000/api/v1/cartitems/')
    .then(res => res.json())
    .then(cartjson =>
      dispatch({
        type: 'FETCH_CART',
        payload: cartjson
    }))
}

The reducer:

const initialState = {
  userCart: [],
  cartItem: {}
}

export default function(state = initialState, action) {
  switch(action.type) {
    case FETCH_CART:
      return {
        ...state,
        userCart: action.payload
      };

mapping state to props:

const mapStateToProps = state => ({
  cart: state.cart.userCart
})

When I console.log(this.props.cart) it returns an empty array. Yet my DevTools correctly show the contents of the array under cart.userCart

Cat_Enthusiast · Accepted Answer · 2019-07-18 21:33:31Z

0

It all depends on where you are console.log()-ing. If you run that in componentDidMount(), then you would just get an empty-array because console.log() runs before you complete the fetch-request and update your reducers. componentDidMount() will not trigger again.

However, your code looks to be set-up correctly. You should be able to print your results in componentDidUpdate(), which is triggered anytime you get updated props or state.

componentDidUpdate(prevProps){
  if(prevProps.cart.length !== this.props.cart.length){
    console.log(this.props.cart)
 }
}

answered Jul 18, 2019 at 21:33

Cat_Enthusiast

15.7k5 gold badges26 silver badges47 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

deejay123 Over a year ago

You're exactly right and that's a big YIKES on my part. Was hammering away at this for the good part of an hour. Food deprivation is a killer.... Thanks a lot!

Cat_Enthusiast Over a year ago

@deejay123 Lool. You're welcome! Gots to eat, food is fuel for the brain and happiness :). If you have any other questions, let me know.

Collectives™ on Stack Overflow

Redux props are being received in Redux DevTools but not in the React component

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related