How to use reducer in redux in react

Question

I am using Redux for state management, I have faced an issue in reducer function here is the image of my console, You can see the Product Action is providing my data but the reducer is not passing on my function

here is my code of ProductAction:

export const getProductsbyFind = (myvariable) =>async (dispatch)=>{
    try {
        console.log(myvariable)
        dispatch({type: ALL_PRODUCTS_REQUEST_BY_ID})
        const{ data } = await axios.get(`/api/v1/product/${myvariable}`)
        console.log(data)
        dispatch({
            type: ALL_PRODUCTS_SUCCESS_BY_ID,
            payload: data
        })
        
    } catch (error) {
        dispatch({
            type:ALL_PRODUCTS_FAIL,
            payload: error.response.data.message
        })
        
    }
}

here is the code of Reducer:

export const productReducersById = (state = { products: [] }, action) => {
    switch (action.type) {
        case ALL_PRODUCTS_REQUEST_BY_ID:
            return {
                loading: true,
                products: []
            }
        case ALL_PRODUCTS_SUCCESS_BY_ID:
            return {
                loading: false,
                products: action.payload.products,
                productsCount: action.payload.productsCount
            }
        case UPDATE_QUANTITY_BY_ID:
            const { index, quantity } = action.payload;
            const prods = state.products.map((p, i) => {
                if (i !== index)
                    return p;
                return {
                    ...p,
                    quantity
                }
            });
            return {
                loading: true,
                products: prods
            }

        case ALL_PRODUCTS_FAIL_BY_ID:
            return {
                loading: false,
                error: action.payload
            }
        case CLEAR_ERRORS_BY_ID:
            return {
                ...state,
                error: null
            }
        default:
            return state
    }
}

here is the code of my page where I want to get my data:

  const { loading, products, error, productCount } = useSelector(state => state.products);
  console.log(products)
  useEffect(() => {
    dispatch(getProductsbyFind(myvariable));
  }, [dispatch])

I think it's a spelling error. Your response has product as a key name but your reducer is accessing it via the action.payload.products — Ali Raza
– Ali Raza, Commented Mar 9, 2022 at 8:51

Alserda · Accepted Answer · 2022-03-09 09:26:40Z

2

You have a typo in your reducer:

  case ALL_PRODUCTS_SUCCESS_BY_ID:
      return {
          loading: false,
-         products: action.payload.products,
+         products: action.payload.product,
          productsCount: action.payload.productsCount
      }

(Also, productsCount does not exist in your payload, so that will become undefined.)

answered Mar 9, 2022 at 9:26

Alserda

4,8041 gold badge19 silver badges25 bronze badges

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

4 Comments

zaryabkhan864 Over a year ago

still same console result

zaryabkhan864 Over a year ago

i removed productsCount and action.payload.products but still same console

Alserda Over a year ago

Also what happens in your example is that your reducer assumes that products are all arrays. Your example code is just a single product object. So what happens is that you change your array into an object. You probably want to have products: [action.payload.product]. Or if you want to keep previous products, you want products: [...state.products, action.state.product]

zaryabkhan864 Over a year ago

got it ... it's really helpful for me

Collectives™ on Stack Overflow

How to use reducer in redux in react

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related