Hope you all are doing well, I am new to Redux, I can do dispatch function without parameters but I never dispatch functions with parameters , I am trying to implement my redux method but it is occurring an error
Here is the code of Action
productAction.js
import axios from 'axios';
import {
GET_PRODUCTS_BY_CATEGORY_REQUEST,
GET_PRODUCTS_BY_CATEGORY_SUCCESS,
GET_PRODUCTS_BY_CATEGORY_SUCCESS_FAIL,
CLEAR_ERRORS
} from '../Constrants/ProductConstrants.js'
export const getProductByCategory = (value) => async(dispatch)=>{
console.log(value)
try {
dispatch({type: GET_PRODUCTS_BY_CATEGORY_REQUEST})
const{ data } = await axios.get('/api/v1/catproduct',{value})
console.log(data)
dispatch({
type: GET_PRODUCTS_BY_CATEGORY_SUCCESS,
payload: data
})
} catch (error) {
dispatch({
type:GET_PRODUCTS_BY_CATEGORY_SUCCESS_FAIL,
payload: error.response.data.message
})
}
}
Here is the code of Reducer
productReducer.js
import {
GET_PRODUCTS_BY_CATEGORY_REQUEST,
GET_PRODUCTS_BY_CATEGORY_SUCCESS,
GET_PRODUCTS_BY_CATEGORY_SUCCESS_FAIL,
CLEAR_ERRORS
} from '../Constrants/ProductConstrants.js'
export const productReducer = (state = { products : []},action)=>{
switch(action.type){
case GET_PRODUCTS_BY_CATEGORY_REQUEST:
return {
loading: true,
products: []
}
case GET_PRODUCTS_BY_CATEGORY_SUCCESS:
return{
loading: false,
rows: action.payload.rows,
}
case GET_PRODUCTS_BY_CATEGORY_SUCCESS_FAIL:
return {
loading: false,
error: action.payload
}
case CLEAR_ERRORS:
return {
...state,
error: null
}
default:
return state
}
}
Here is the code where i would like to get data
itemList.jsx
import React, { useEffect } from 'react'
import { useDispatch, useSelector } from 'react-redux';
import { getProductByCategory } from '../../services/Action/productAction'
const ItemList = (props) => {
const itemId = props.myData
const dispatch = useDispatch();
const { rows } = useSelector(state => state.products);
console.log(rows)
useEffect(() => {
dispatch(getProductByCategory(itemId));
}, [dispatch])