0

Tengo muchas dudas con React-Redux. En estos momentos estoy bastante trabado con una segunda pantalla de mi proyecto. Estoy manejandome con este JSON que estoy consultando con Axios:

RESPUESTA DEL JSON:

[
conos: 
     [
     {"id": 0,…},
     {"id": 1,…},
     {"id": 2,…},
     {"id": 3,…},
     {"id": 4,…},
     {"id": 5,…},
     {"id": 6,…},
     {"id": 7,…},
    ],
date: "16/11/2020 a las 0:50:48"
]

Resumidamente, preciso mostrar en mi pantalla la información de cada objeto de conos. Es decir, un cono en particular, por ejemplo: {"id": 0,...}.

En mi action creator estoy manejando mi payload como payload: res.conos ya que ahí dentro está la información que necesito. Pero yo debo mostrar la información de un cono en particular cuando haga clic en un botón (creo que no hace falta mostrar eso, dado el caso edito el thread y lo muestro).

Aquí les dejo mi action creator:

export const fetchCono = (ip) => async (dispatch) => {
  dispatch({ type: FETCH_CONO_PENDING });
  try {
    let res = await fetchConoAPI(ip);
    dispatch({ type: FETCH_CONO_FULFILL, payload: res.conos });
  } catch (error) {
    dispatch({ type: FETCH_CONO_REJECT, payload: error.message });
  }
};

Aquí está mi reducer:

const initialState = {
  isGetting: false,
  currentCono: [],
  fetchConoErrorMessage: null,
};


export default (state = initialState, action) => {
  switch (action.type) {
    case FETCH_CONO_FULFILL:
      return {
        ...state,
        currentCono: action.payload,
        isGetting: false,
      };
    case FETCH_CONO_PENDING:
      return { ...state, isGetting: true };
    case FETCH_CONO_REJECT:
      return {
        ...state,
        isGetting: false,
        fetchConoErrorMessage: action.payload,
      };
    default:
      return state;
  }
};

Espero haberme explicado bien, cualquier cosa estoy atento. Muchas gracias!

4
  • No veo que tengas una lista de conos en Redux, solo veo un currentCono. Necesitarías pasarle el identificador del elemento que quieras mostrar al reducer a través del payload, y luego filtrar la lista para encontrarlo (por ejemplo con state.conos.filter(item => item.id === payload.id)).
    – Gabri
    Commented el 16 nov. 2020 a las 7:26
  • Exacto, en mi payload tengo una lista de conos, en mi reducer quiero mostrar un solo cono (el que seleccioné) @Gabri podrías explicarte un poco mejor? Commented el 16 nov. 2020 a las 14:20
  • No entiendo por qué le pasas la lista completa en el payload, yo crearía una lista en el initialState para almacenarla y en el payload le mandaría únicamente en identificador del elemento que quiero recuperar.
    – Gabri
    Commented el 16 nov. 2020 a las 14:34
  • Le paso la lista completa porque dentro de res.conos están los conos que necesito, pero si puede ser de otra forma, estaría buenísimo ver cómo quedaría. En mi initialState, currentCono arranca vacío, a eso te referías? Si me puedes mostrar como quedaría, me ayudarías un montonazo. Commented el 16 nov. 2020 a las 14:50

1 respuesta 1

0

Creo que es más fácil de lo que parece.

Yo guardaría en el state de Redux la lista completa de conos, por ejemplo:

const initialState = {
    isGetting: false,
    conosList: [], // aquí la lista
    currentCono: [],
    fetchConoErrorMessage: null
}

Lanzaríamos una acción para guardar todos los conos en esa lista:

dispatch({ type: SET_CONOS, payload: res.conos })

Y el reductor sería algo así:

case SET_CONOS:
    return {
        ...state,
        conosList: payload
    }

Para obtener un cono de la lista a través de su identificador no es necesario ejecutar ninguna acción contra Redux, simplemente accedes al estado y lo buscas (por ejemplo, usando useSelector).

En tu componente harías algo tipo:

import { useSelector } from 'react-redux'

const App = (props) => {
    const conosList = useSelector(state => state.conosList)

    const getCono = (id) => {
        return conosList.filter(cono => cono.id === id)
    }

    return <button onClick={() => getCono(3)}>Obtener cono</button>
}

Este es un código de ejemplo, espero te sirva para tener una idea base de lo que esperas.

3
  • Me sirvió, muchísimas gracias. Commented el 16 nov. 2020 a las 15:17
  • Ahora, tengo una duda, cómo haría para que a getCono(id) no tenga que ponerle el ID del cono por parámetro? Es decir, sin ponerle a mano que es el cono "id": 3? Commented el 16 nov. 2020 a las 15:21
  • ¿Te refieres a por qué puse el 3 a fuego? A la función le pasarías el identificador del cono que necesites, en el ejemplo puse 3 pero más bien sería una variable correspondiente a cada registro.
    – Gabri
    Commented el 16 nov. 2020 a las 15:40

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.