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

Question

我已经尝试了很多次来解决这个错误，但是我做不到。有了它，我不知道下一步该怎么做。我已经尝试了所有方法来获得解决方案，但没有成功。

 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 1

您没有从 productReducer 文件中导出您试图导入第一个文件的命名常量。只需从 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'

但这可能会导致名称冲突，因为您在 productReducer 中导入具有相似名称的常量，因此如果您没有在 productReducer 中的其他任何地方使用，最好避免导入，因为范围常量位于 reducer 函数的 switch 案例中。

Answer 2

在您的代码中，您尝试从 reducer 文件中导入常量，但尚未从该文件中导出它们。此外，您还在 reducer 文件中导入了相同的常量。我认为您对导入和导出感到困惑。所以试试这个：

您应该像这样在 ** productConstants** 文件中声明所有这些常量： 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';

现在，将这些常量导入到 reducer 文件和 action 文件中，如下所示：

你的动作文件：

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 应该有一个合适的文件来轻松实现这个工作。我在这里创建 React Native Redux Skeleton。检查初始文件结构。

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

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

javascript

reactjs

react-native

react-redux