Redux state changes but not reflected in component

Question

I'm trying to implement a shopping cart using redux. here is my cart-reducer:

export const cartReducer = (
state = { cartItems: JSON.parse(localStorage.getItem("cartItems") || "[]")},
action) => {
switch (action.type) {
 case ADD_TO_CART:
  return { ...state,cartItems: action.payload };
}}

Here is the component where I want to show the updated state value accessing it using props in connect and update the cartItems.length after every state update

class Cartsidebar extends Component {
    constructor(props) {
        super(props);
        this.state = {
            grandTotal: '',toggle:true
        }
    }
    handleHide(){
        this.setState({ toggle: !this.state.toggle})
    }
    render() {
        
     const {cartItems}=this.props;
     console.log(cartItems);
        return (
            <div>
               {cartItems.length}

            </div>
        )
    }
}

export default connect(
    (state) => ({
        cartItems: state.cart.cartItems,
    }),
    { incrementToCart, decreaseToCart, removeFromCart }
)(Cartsidebar);

States are updating fine and state-difference is also showing in redux-dev-tools on every update of redux state but it is not reflecting in cart component.what am i doing wrong here?Thanks in advance.

EDIT: this is function that execute on add to cart button onclick event:

handleAddToCart=(p)=>{
const cartItems = store.getState().cart.cartItems;
  let alreadyExists = false;
  cartItems.forEach((x) => {
    if (x.discountPer === p.discountPer) {
      alreadyExists = true;
    }
  });
  if (!alreadyExists) {
    cartItems.push({ ...p });
  }


store.dispatch(addToCart(cartItems));
     
}

And addToCart action creator looks like this:

export const addToCart = (cartItem) => {
  return({
    type: ADD_TO_CART,
    payload: cartItem,
  });
};

what does your code look like when making a call to add to the cart? — apachuilo, Sep 22 '21 at 19:07
@apachuilo I have made edits to include action and addToCart handler. — mbhatti_20, Sep 22 '21 at 19:37
I might be mistaken, but the way you are adding to the cart is mutable. I don't think redux will recognize that unless it is a new array. For testing sake you could see if changing your dispatch to `store.dispatch(addToCart([...cartItems]));` helps. — apachuilo, Sep 22 '21 at 19:46
link to the docs that go over some immutable update patterns https://redux.js.org/usage/structuring-reducers/immutable-update-patterns — apachuilo, Sep 22 '21 at 19:54
Well if you can setup a CodeSandbox or something to re-create the issue I'll take a look — apachuilo, Sep 22 '21 at 20:09

score 1 · Answer 1 · answered Sep 22 '21 at 21:20

What you are doing in handleAddToCart is a big no no, and goes against the pattern that Redux tries to enforce. I made some changes to your logic to make it easier, and updated the reducer. In theory, if you make these changes, it should work.

handleAddToCart:

handleAddToCart = (p) => {
  const cartItems = store.getState().cart.cartItems;

  for (const item of cartItems) {
    if (item.discountPer === p.discountPer) {
      return;
    }
  }

  store.dispatch(addToCart({ ...p }));
};

reducer:

export const cartReducer = (
  state = { cartItems: JSON.parse(localStorage.getItem("cartItems") || "[]") },
  action
) => {
  switch (action.type) {
    case ADD_TO_CART:
      return { ...state, cartItems: [...state.cartItems, action.payload] };
  }
};

Thanks Dan for answer . this really helped.but i could accept only one answer — mbhatti_20, Sep 23 '21 at 22:24

Drew Reese · Accepted Answer · 2021-09-22T21:29:36.067

Issues

You are mutating the state object. You are accessing a reference to the cart array in state and directly pushing into it.
You aren't leveraging the power of Redux and reducers properly.

code

handleAddToCart = (p) => {
  const cartItems = store.getState().cart.cartItems; // cartItems is reference to state
  let alreadyExists = false;
  cartItems.forEach((x) => {
    if (x.discountPer === p.discountPer) {
      alreadyExists = true;
    }
  });
  if (!alreadyExists) {
    cartItems.push({ ...p }); // mutation!!
  }

  store.dispatch(addToCart(cartItems));
}

Solution

Pass the item you want to add to the cart in the action and move all the logic to update the cart into your reducer.

UI

handleAddToCart = (p) => {
  this.props.addToCart(p);
}

...

export default connect(
  (state) => ({
    cartItems: state.cart.cartItems,
  }),
  { addToCart, incrementToCart, decreaseToCart, removeFromCart }
)(Cartsidebar);

reducer

case ADD_TO_CART:
  const { payload } = action;
  const found = state.cartItems.find(item => item.discountPer === payload.discountPer);

  if (found) {
    return state;
  }

  return {
    ...state,
    cartItems: state.cartItems.concat(payload),
  };

Thanks a lot @Drew Reese .this exatly solved my issue – mbhatti_20 Sep 23 '21 at 22:26 — mbhatti_20, Sep 23 '21 at 22:26

Redux state changes but not reflected in component

2 Answers2

Issues

Solution