Business
Jobs
  • About Us
  • Solutions
    • Job Postings
      Post your job and receive qualified candidates in 48h.
    • Candidate Assessments
      500+ technical and psychological tests, plus anti-fraud.
    • Headhunting
      Tailor-made executive search from start to finish.
    • Payroll + EOR
      Payroll dispersal and EOR across 15+ LATAM countries.
  • Pricing
  • Jobs

0

202
Views
./src/actions/productActions.js Attempted import error: 'PRODUCT_LIST_FAIL' is not exported from '../reducers/productReducers'

i have tried many times to solve this error, but i couldn't do it. with it I don't know what to do next. i have tried all the way to get solution but its not working out.

 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};

productReducer:

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}
about 4 years ago · Juan Pablo Isaza
2 answers
Answer question

0

You are not exporting the named constants from productReducer file that you are trying to import in your first file. Just do a named export from 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'

But this might cause name clashes as you are importing constants with similar names in productReducer, so it's better to avoid the import if you are not using anywhere else in productReducer because the scope of the constants is localized within the reducer function's switch case.

about 4 years ago · Juan Pablo Isaza Report

0

In your code you are trying have imported constants from reducer file but you have not exported them from that file. Also you have imported same constants in reducer file also. I think you are confused about import and export. So try this:

You should have declare all of that constants in ** productConstants** file like this: 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';

Now, import these constants in your both file reducer file and action file like this:

your action file:

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 should have a proper file to implement the job easily. I have created here React Native Redux Skeleton. Check this for the initial file stucture.

about 4 years ago · Juan Pablo Isaza Report
Answer question
Find remote jobs

Discover the new way to find a job!

Top jobs
Top job categories
Business
Post vacancy Pricing Sales
Legal
Terms and conditions Privacy policy
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Show me some job opportunities
There's an error!