useReducer Hook

Author: rohitverma0234

src/context/productcontext.js

@@ -1,26 +1,42 @@
 import axios from 'axios';
-import React, { createContext, useContext, useEffect } from 'react'
+import React, { createContext, useContext, useEffect, useReducer } from 'react';
+import reducer from "../reducer/productReducer"
 
 const AppContext = createContext();
 
 const AppProvider = ({ children }) => {
 
  const API = "https://api.pujakaitem.com/api/products";
 
- const getProduct = async (url)=>{
- const res = await axios.get(url)
- const product = await res.data
- // console.log(res)
- console.log(product)
+ const initialState = {
+ isLoading:false,
+ isError:false,
+ products:[],
+ featureProducts:[]
+ }
+
+ const[state, dispatch] = useReducer(reducer, initialState)
+
+ const getProducts = async (url)=>{
+ dispatch({try:"SET_LOADING"})
+ try {
+ const res = await axios.get(url)
+ const products = await res.data
+ // console.log(res)
+ // console.log(products)
+ dispatch({type:"MY_API_DATA", payload:products})
+ } catch (error) {
+ dispatch({type:"API_ERROR"})
+ }
 
  }
 
  useEffect(()=>{
- getProduct(API)
+ getProducts(API)
  },[])
 
  return (
- <AppContext.Provider value={{myName:"Rohit"}}>
+ <AppContext.Provider value={{...state}}>
  {children}
  </AppContext.Provider>
  )

src/reducer/productReducer.js

@@ -0,0 +1,63 @@
+const productReducer = (state, action) => {
+ // if(action.type==="SET_LOADING"){
+ // return{
+ // ...state,
+ // isLoading:true
+ // }
+ // }
+
+ // if(action.type==="MY_API_DATA"){
+ // const featureData = action.payload.filter((curElem)=>{
+ // return curElem.featured === true;
+ // })
+ // return{
+ // ...state,
+ // isLoading:false,
+ // products:action.payload
+ // featureProducts:featureData
+ // }
+ // }
+ 
+
+ // if(action.type==="API_ERROR"){
+ // return{
+ // ...state,
+ // isLoading:false,
+ // isError:true
+ // }
+ // }
+
+ switch (action.type) {
+ case "SET_LOADING":
+ return {
+ ...state,
+ isLoading: true
+ }
+
+ case "MY_API_DATA":
+ const featureData = action.payload.filter((curElem) => {
+ return curElem.featured === true;
+ })
+
+ return {
+ ...state,
+ isLoading: false,
+ products: action.payload,
+ featureProducts: featureData
+ }
+
+ case "API_ERROR":
+ return {
+ ...state,
+ isLoading: false,
+ isError: true
+ }
+
+
+
+ default:
+ return state
+ }
+}
+
+export default productReducer