React JS Redux Toolkit 项目中的“首选命名导出导入/无默认导出”

Question

当我进行yarn构建时，我在React JS Redux Toolkit项目中收到错误“Prefernamedexportsimport/no-default-export”。

在 Redux Toolkit 代码中，我收到以下行代码的错误：“首选命名导出 import/no-default-export”。

export default orders.reducer;

由于提到的错误，我无法运行 yarn build 命令。

Redux工具包代码如下。

import { createAsyncThunk, createSlice } from '@reduxjs/toolkit';
import { ORDER_SLICE } from 'constants/Constants';
import { envConfig } from 'envConfig';
import { httpClient } from 'httpClient';
import { GetOrdersType, OrdersType } from 'redux/interface/Orders';

const initialState: OrdersType = {
    data: null,
    totalCount: null,
    loading: false,
    error: null,
};

const orders = createSlice({
    name: ORDER_SLICE.NAME,
    initialState,
    reducers: {},
    extraReducers: (builder) => {
        builder.addCase(getOrdersData.pending, (state) => {
            state.loading = true;
        });
        builder.addCase(getOrdersData.fulfilled, (state, action) => {
            state.loading = false;
            state.data = action.payload.orders;
            state.totalCount = Number(action.payload.pageable.totalCount);
        });
        builder.addCase(getOrdersData.rejected, (state, action) => {
            state.loading = false;
            state.error = action.payload;
        });
    },
});

export default orders.reducer;

export const getOrdersData = createAsyncThunk(
    ORDER_SLICE.GET_ORDERS_DATA,
    async (config:GetOrdersType, { rejectWithValue }) => {
        try {
            const response = await httpClient?.get(`${envConfig.apiOrders}?size=${config.size}&page=${config.currentPage}`);
            return response?.data;
        } catch (error:any) {
            console.log('error ', error);
            return rejectWithValue(error.message);
        }
    },
);

Answer 1

您有几个选择：

1. 更改您的 linting 规则以允许默认导出

2. 禁用该特定行的 lint 规则

   // eslint-disable-next-line import/no-default-export
   export default orders.reducer;
   

3. 使用命名导出，就像您的项目似乎是为设置的那样

   export const { reducer } = orders;
   

   import { reducer as ordersReducer } from '../path/to/orders.slice';