Shopping Cart implementation React-Redux

Question

I am implementing a shop cart using react-redux. I got two reducers, 1.To fetch cart data from DB 2. To Carry out various cart operations.

My doubt is after achieving data from DB through the first reducer, how will I access that data through the 2nd reducer in order to carry out different cart operations ?

Reducer 1 - Fetch Data from DB

const initialState={
    loading:false,
    items:[], 
    error:false
}

const CartFetch=(state=initialState,action)=>{
    switch(action.type){
        
        case FETCHDATA : return { 
            ...state,loading:true ,error:false
        };

        case FETCHSUCCESS: return { 
            ...state,loading:false,
            items:[...action.payload]
        };

        case FETCHERROR : return { 
            ...state,loading:false,error:true
        };

        default: return state;
    }
}

Fetch Actions

const fetch=()=>{
    return {
        type:FETCHDATA
    }
}

const success=(user)=>{
    return {
        type:FETCHSUCCESS,
        payload:user
    }
}

const error=()=>{
    return {
        type:FETCHERROR
    }
}

const fetchCartData=()=>{

    const {id}=getCurrentUser();

    return (dispatch)=>{
        dispatch(fetch());
        axios.get(`${api.userOperations}/cart/${id}`,{
            headers:{'Authorization': getJwt()}
        }).then(({data})=>{
            dispatch(success(data));
        }).catch(()=>{
            dispatch(error())
        })
    }
}

Reducer 2 - Cart Operations

const CartHandle=(state= ..?.. ,action)=>{

        switch(action.type){
            
            case ADD_TO_CART :
            return {
                ......
            };

            case INCREMENT_CART : return { 
                ....
            };

            case DECREMENT_CART: return { 
                ......
            };

            case REMOVE_FROM_CART : return { 
                .....
            };

            default: return state;
        }
    }
}

Here in Reducer 2 how will I access the pass the data which I fetched in Reducer 1 ? Or easy there any better way of implementing what I m trying to ?

Combine Reducers

const allReducer=combineReducers({
    Cart:CartFetch,
    CartOperations: CartHandle
});

Store

const countStore=createStore(allReducer,applyMiddleware(thunk));



...App.js...

user_8690857 · Answer

Issue

It seems you don't quite fully understand what a reducer represents. Each reducer represents a specific "chunk" or slice of state. No two reducers function/operate on the same slice of state. In other words, two separate reducers equals two separate slices of state.

Solution

Since a reducer represents a specific slice of state it needs to handle all the actions that are associated with that slice. You just need to merge your second reducer into the first on so it fully manages the cart state.

const initialState = {
  loading: false,
  items: [],
  error: false
};

const cartReducer = (state = initialState, action) => {
  switch (action.type) {
    case FETCHDATA:
      return {
        ...state,
        loading: true,
        error: false
      };

    case FETCHSUCCESS:
      return {
        ...state,
        loading: false,
        items: [...action.payload]
      };

    case FETCHERROR:
      return {
        ...state,
        loading: false,
        error: true
      };

    case ADD_TO_CART:
      return {
        // ......
      };

    case INCREMENT_CART:
      return {
        // ....
      };

    case DECREMENT_CART:
      return {
        // ......
      };

    case REMOVE_FROM_CART:
      return {
        // .....
      };

    default:
      return state;
  }
};

Create your root reducer, each combined reducer represents a slice of state.

const allReducer = combineReducers({
  // ... other state slice reducers
  cart: cartReducer,
  // ... other state slice reducers
});

Shopping Cart implementation React-Redux

1 Answers

Issue

Solution