obteniendo datos de la tienda en react redux

Answer

1. 

   davy.ai

   July 31, 2023 at 1:27 am

   Para lograr esto, puedes modificar tu código de la siguiente manera:

   1. Modifica tu servidor JSON para incluir también la descripción de cada característica, así:

   [
      {
         "id": 1,
         "feature": "Funcionalidad 1",
         "description": "Descripción de la funcionalidad 1"
      },
      {
         "id": 2,
         "feature": "Funcionalidad 2",
         "description": "Descripción de la funcionalidad 2"
      },
      {
         "id": 3,
         "feature": "Funcionalidad 3",
         "description": "Descripción de la funcionalidad 3"
      }
   ]
   

   1. En tu reductor, agrega una nueva propiedad description a la sección feature del estado:

   const initialState = {
      feature: null,
      description: null,
      loading: false,
      error: null
   };
   
   export default function featureReducer(state = initialState, action) {
      switch (action.type) {
         case GET_FEATURE_SUCCESS:
            return {
               ...state,
               feature: action.payload,
               loading: false
            };
         case GET_DESCRIPTION_SUCCESS:
            return {
               ...state,
               description: action.payload,
               loading: false
            };
         // Resto de los casos
         default:
            return state;
      }
   }
   

   1. Modifica tu componente para despachar una nueva acción cuando se haga clic en una característica. Esta acción buscará la descripción de la característica clicada:

   const dispatch = useDispatch();
   useEffect(() => {
      dispatch(getFeature());
   }, [dispatch]);
   
   const feature = useSelector(state => state.feature.feature);
   const description = useSelector(state => state.feature.description);
   
   const handleClick = id => {
      dispatch(getDescription(id));
   };
   
   return (
      <div>
         <ul>
            {feature
               ? feature.map(list => {
                    return (
                       <li key="{list.id}">
                          <a onclick="{()" ==""> handleClick(list.id)}>
                             {list.feature}
                          </a>
                       </li>
                    );
                 })
               : ""}
         </ul>
         {description && (
            <div>
               <h2>{feature.find(f => f.id === description.id).feature}</h2>
               {description.description}
            </div>
         )}
      </div>
   );
   

   1. Define dos nuevas sagas para manejar la obtención de la característica y la descripción:

   import { call, put, takeLatest } from "redux-saga/effects";
   import { GET_FEATURE, GET_DESCRIPTION } from "./constants";
   
   function* fetchFeature() {
      try {
         const response = yield call(fetch, "http://localhost:3000/features");
         const data = yield call([response, "json"]);
         yield put({ type: GET_FEATURE_SUCCESS, payload: data });
      } catch (error) {
         yield put({ type: GET_FEATURE_FAILURE, payload: error });
      }
   }
   
   function* fetchDescription(action) {
      try {
         const response = yield call(
            fetch,
            `http://localhost:3000/features/${action.payload}`
         );
         const data = yield call([response, "json"]);
         yield put({ type: GET_DESCRIPTION_SUCCESS, payload: data });
      } catch (error) {
         yield put({ type: GET_DESCRIPTION_FAILURE, payload: error });
      }
   }
   
   export default function* featureSaga() {
      yield takeLatest(GET_FEATURE, fetchFeature);
      yield takeLatest(GET_DESCRIPTION, fetchDescription);
   }
   

   1. Modifica tus creadores de acciones para despachar estas nuevas acciones:

   import { GET_FEATURE, GET_DESCRIPTION } from "./constants";
   
   export function getFeature() {
      return { type: GET_FEATURE };
   }
   
   export function getDescription(id) {
      return { type: GET_DESCRIPTION, payload: id };
   }
   

   Con estas modificaciones, tu componente ahora mostrará la descripción de la característica clicada. La función handleClick despacha una acción GET_DESCRIPTION con el ID de la característica clicada como carga útil. La saga fetchDescription utiliza este ID para obtener la descripción correspondiente del servidor JSON y despacha una acción GET_DESCRIPTION_SUCCESS con la descripción como carga útil. El componente escucha esta acción y muestra la descripción de la característica clicada.

Comments are closed.