如何解决Redux中A module cannot have multiple default exports.ts(2528)错误？

问题出在productConstants.js里使用了多个export default——一个JS/TS模块只能有一个默认导出，这就是触发A module cannot have multiple default exports.ts(2528)错误的核心原因。

修复步骤： #

1. 修改productConstants.js，替换默认导出为命名导出
   把所有export default改成export const，这样就能合法导出多个常量：

export const ALL_PRODUCTS_REQUEST = 'ALL_PRODUCT_REQUEST'
export const ALL_PRODUCTS_SUCCESS = 'ALL_PRODUCT_SUCCESS'
export const ALL_PRODUCTS_FAIL = 'ALL_PRODUCT_FAIL'
export const CLEAR_ERRORS = 'CLEAR_ERRORS'

2. 修正productReducers.js的导入与switch逻辑
   保留原有导入语法，同时补全switch里的case处理逻辑（给state补充异步请求常用的loading和error字段，可按需调整）：

import { ALL_PRODUCTS_REQUEST, ALL_PRODUCTS_SUCCESS, ALL_PRODUCTS_FAIL, CLEAR_ERRORS } from '../constants/productConstants'

export const productsReducer = (state = { products: [], loading: false, error: null }, action) => {
    switch(action.type) {
        case ALL_PRODUCTS_REQUEST:
            return {
                ...state,
                loading: true,
                error: null
            }
        case ALL_PRODUCTS_SUCCESS:
            return {
                ...state,
                loading: false,
                products: action.payload
            }
        case ALL_PRODUCTS_FAIL:
            return {
                ...state,
                loading: false,
                error: action.payload
            }
        case CLEAR_ERRORS:
            return {
                ...state,
                error: null
            }
        default:
            return state;
    }
}

3. 将reducer注册到store
   把productsReducer添加到store.js的combineReducers中，让store能管理该状态：

//import { configureStore } from '@reduxjs/toolkit'
import { createStore, combineReducers, applyMiddleware } from 'redux';
import thunk from 'redux-thunk';
import { composeWithDevTools } from 'redux-devtools-extension'
import { productsReducer } from './path/to/productReducers' // 替换为你的实际文件路径

const reducer = combineReducers({
    products: productsReducer
})

let initialState = {}

const middleware = [thunk];
const store = createStore( reducer, initialState, composeWithDevTools(applyMiddleware(...middleware))) 

export default store;

完成以上修改后，多默认导出的错误会被解决，同时Redux的产品状态处理逻辑也会完整可用。

内容的提问来源于stack exchange，提问作者pierre