./src/actions/productActions.js Attempted import error: 'PRODUCT_LIST

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}

CodePudding user response：

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.

CodePudding user response：

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.