./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}

Answer

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.