He intentado muchas veces solucionar este error, pero no pude hacerlo. con él no sé qué hacer a continuación. He intentado todo el camino para obtener una solución, pero no funciona.
import axios from "axios" import {PRODUCT_DETAILS_FAIL,PRODUCT_DETAILS_REQUEST,PRODUCT_DETAILS_SUCCESS} from "../constants/productConstants"; import {PRODUCT_LIST_FAIL,PRODUCT_LIST_REQUEST,PRODUCT_LIST_SUCCESS} from "../reducers/productReducers" const listProducts = () => async (dispatch) =>{ try{ dispatch({type:PRODUCT_LIST_REQUEST}); const {data}= await axios.get("/api/products"); dispatch({type:PRODUCT_LIST_SUCCESS,payload:data}); } catch(error){ dispatch({type:PRODUCT_LIST_FAIL,payload:error.message}); } } const detailsProduct=(productId)=>async(dispatch)=>{ try { dispatch({type:PRODUCT_DETAILS_REQUEST,payload:productId}); const{data} =await axios.get("/api/products/"+productId); dispatch({type:PRODUCT_DETAILS_SUCCESS,payload:data}); } catch (error) { dispatch({type:PRODUCT_DETAILS_FAIL,payload:error.message}); } } export default{listProducts,detailsProduct};productoReductor:
import { PRODUCT_LIST_FAIL, PRODUCT_LIST_REQUEST, PRODUCT_LIST_SUCCESS } from "../constants/productConstants"; function productListReducer(state= {products:[]},action){ switch(action.type){ case PRODUCT_LIST_REQUEST: return{loading:true}; case PRODUCT_LIST_SUCCESS: return{loading:false, products:action.payload}; case PRODUCT_LIST_FAIL: return{loading:false,error:action.payload}; default: return state; } } export {productListReducer}No está exportando las constantes con nombre del archivo productReducer que está tratando de importar en su primer archivo. Simplemente haga una exportación con nombre desde productReducer .
import { PRODUCT_LIST_FAIL, PRODUCT_LIST_REQUEST, PRODUCT_LIST_SUCCESS } from "../constants/productConstants"; //^^ avoid this import if not using anywhere in the file function productListReducer(state= {products:[]},action){ switch(action.type){ case PRODUCT_LIST_REQUEST: return{loading:true}; case PRODUCT_LIST_SUCCESS: return{loading:false, products:action.payload}; case PRODUCT_LIST_FAIL: return{loading:false,error:action.payload}; default: return state; } } export productListReducer export const PRODUCT_LIST_FAIL = 'YOUR VALUE HERE' export const PRODUCT_LIST_REQUEST = 'YOUR VALUE HERE' export const PRODUCT_LIST_SUCCESS = 'YOUR VALUE HERE' Pero esto puede causar conflictos de nombres, ya que está importando constantes con nombres similares en productReducer , por lo que es mejor evitar la importación si no está utilizando ningún otro lugar en productReducer porque el alcance de las constantes se localiza dentro del caso de switch de la función reducer.
En su código, está intentando importar constantes del archivo reductor pero no las ha exportado de ese archivo. También ha importado las mismas constantes en el archivo reductor también. Creo que estás confundido acerca de la importación y exportación. Así que prueba esto:
Debería haber declarado todas esas constantes en el archivo ** productConstants** como este: productConstants.js
export const PRODUCT_DETAILS_FAIL = 'PRODUCT_DETAILS_FAIL'; export const PRODUCT_DETAILS_REQUEST = 'PRODUCT_DETAILS_REQUEST'; export const PRODUCT_DETAILS_SUCCESS = 'PRODUCT_DETAILS_SUCCESS'; export const PRODUCT_LIST_FAIL = 'PRODUCT_LIST_FAIL'; export const PRODUCT_LIST_REQUEST = 'PRODUCT_LIST_REQUEST'; export const PRODUCT_LIST_SUCCESS = 'PRODUCT_LIST_SUCCESS';Ahora, importe estas constantes en su archivo reductor de archivos y en su archivo de acción de esta manera:
su archivo de acción:
import axios from "axios"; import { PRODUCT_DETAILS_FAIL, PRODUCT_DETAILS_REQUEST, PRODUCT_DETAILS_SUCCESS, // import these also from same file PRODUCT_LIST_FAIL, PRODUCT_LIST_REQUEST, PRODUCT_LIST_SUCCESS, } from "../constants/productConstants"; const listProducts = () => async (dispatch) => { try { dispatch({ type: PRODUCT_LIST_REQUEST }); const { data } = await axios.get("/api/products"); dispatch({ type: PRODUCT_LIST_SUCCESS, payload: data }); } catch (error) { dispatch({ type: PRODUCT_LIST_FAIL, payload: error.message }); } }; const detailsProduct = (productId) => async (dispatch) => { try { dispatch({ type: PRODUCT_DETAILS_REQUEST, payload: productId }); const { data } = await axios.get("/api/products/" + productId); dispatch({ type: PRODUCT_DETAILS_SUCCESS, payload: data }); } catch (error) { dispatch({ type: PRODUCT_DETAILS_FAIL, payload: error.message }); } }; export default { listProducts, detailsProduct };React redux debe tener un archivo adecuado para implementar el trabajo fácilmente. He creado aquí React Native Redux Skeleton . Verifique esto para la estructura del archivo inicial.