Redux提供程序导致最大调用堆栈大小超过

Question

因此，我试图实现一个从API中获取数据的东西，但是每当我将<Provider store={store}>添加到我的网站时，它会导致以下错误：

ERROR in ./node_modules/@reduxjs/toolkit/dist/redux-toolkit.esm.js
Module build failed (from ./node_modules/babel-loader/lib/index.js):
RangeError: /home/netsu/Documents/Code/HTML-CSS-JS/Webpages/steve-studies/website/client/node_modules/@reduxjs/toolkit/dist/redux-toolkit.esm.js: Maximum call stack size exceeded
    at new TraceMap (/home/netsu/Documents/Code/HTML-CSS-JS/Webpages/steve-studies/website/client/node_modules/@jridgewell/trace-mapping/dist/trace-mapping.umd.js:166:20)
    at /home/netsu/Documents/Code/HTML-CSS-JS/Webpages/steve-studies/website/client/node_modules/@ampproject/remapping/dist/remapping.umd.js:230:26
    at Array.map (<anonymous>)
    at build (/home/netsu/Documents/Code/HTML-CSS-JS/Webpages/steve-studies/website/client/node_modules/@ampproject/remapping/dist/remapping.umd.js:206:42)
    at /home/netsu/Documents/Code/HTML-CSS-JS/Webpages/steve-studies/website/client/node_modules/@ampproject/remapping/dist/remapping.umd.js:230:20
    at Array.map (<anonymous>)
    at build (/home/netsu/Documents/Code/HTML-CSS-JS/Webpages/steve-studies/website/client/node_modules/@ampproject/remapping/dist/remapping.umd.js:206:42)
    at /home/netsu/Documents/Code/HTML-CSS-JS/Webpages/steve-studies/website/client/node_modules/@ampproject/remapping/dist/remapping.umd.js:230:20
    at Array.map (<anonymous>)
    at build (/home/netsu/Documents/Code/HTML-CSS-JS/Webpages/steve-studies/website/client/node_modules/@ampproject/remapping/dist/remapping.umd.js:206:42)
 @ ./src/store.ts 3:0-50 5:14-28
 @ ./src/index.tsx 7:0-28 12:11-16

index.tsx非常简单：

import ReactDOM from 'react-dom';
import { Provider } from 'react-redux';
import App from './App';
import store from './store';

ReactDOM.render(
  <>
    <Provider store={store}>
      <App />
    </Provider>
  </>,
  document.getElementById('root')
);

商店也是：

import { configureStore } from '@reduxjs/toolkit';
import rootReducer from './reducers';

const store = configureStore({
  reducer: rootReducer,
});

if (process.env.NODE_ENV === 'development' && module.hot) {
  module.hot.accept('./reducers', () => {
    store.replaceReducer(rootReducer);
  });
}

export default store;

和减速器：

import { combineReducers } from 'redux';
import coursesSlice from './views/courses/slice';

const rootReducer = combineReducers({
  courses: coursesSlice,
});

export default rootReducer;

起初，我认为错误可能起源于slices.ts文件，但现在还不太确定：

import { createSlice } from '@reduxjs/toolkit';
import { getCourses } from '../../api/courses';

const initialState = {
  loadingStatus: 'NOT_STARTED',
  courses: [],
  error: ""
};

const coursesSlice = createSlice({
  name: 'courses',
  initialState,
  reducers: {
    getCoursesStarted(state) {
      state.loadingStatus = 'PENDING';
    },
    getCoursesSuccess(state, action) {
      const courses = action.payload;
      state.courses = courses;
      state.loadingStatus = 'COMPLETE';
    },
    getCoursesFailed(state) {
      state.loadingStatus = 'COMPLETE';
      state.error = 'Could not get courses';
    },
  },
});

export const {
  getCoursesStarted,
  getCoursesSuccess,
  getCoursesFailed,
} = coursesSlice.actions;

export default coursesSlice.reducer;

export const fetchCourses = () => async (dispatch: any) => {
  try {
    dispatch(getCoursesStarted());
    const courses = await getCourses();
    dispatch(getCoursesSuccess(courses));
  } catch (err: any) {
    dispatch(getCoursesFailed());
  }
};

然而，App.tsx是这样的，即使我删除了除返回之外的所有内容，它仍然会抛出错误，所以它不是从这里：

import React, { useEffect } from 'react';
import { fetchCourses } from './views/courses/slice';
import { RootStateOrAny, useDispatch, useSelector } from 'react-redux';

const App: React.FC = () => {
  const dispatch = useDispatch();

  const courses = useSelector<RootStateOrAny, {
    loadingStatus: string,
    courses: any,
    error: string
  }>((state) => state);

  useEffect(() => {
    if(courses.loadingStatus === "NOT_STARTED"){
      dispatch(fetchCourses)
    }
  }, [dispatch, courses.loadingStatus])


  return (
    <div>
      <h1>Users</h1>
    </div>
  )
}

export default App;

我到处找，但找不到答案.为什么会发生这种情况，我知道这是因为递归函数，据我所读，但我不明白为什么会引起.

• 操作系统: Arch Linux
• TypeScript: 4.5.5
• Node.js: 16.13.2

Answer 1

更新：刚刚发布的7.17.4已经修复了这个问题。你的构建应该毫无问题地进行。

这似乎是@babel/core更新(7.17.3)的一个问题。钉扎 @babel/core到7.17.2似乎已经解决了一些人的问题