./src/actions/productActions.js 尝试导入错误：'PRODUCT_LIST_FAIL' 未从'../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

在你的代码中，你试图从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中文件和操作文件如下:

你的动作文件:

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骨架。检查初始文件结构。

Answer 2

您没有从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中本地化。