Redux Provider 导致超出最大调用堆栈大小

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 是这样的，但是，即使我删除了 return 以外的所有内容，它仍然会抛出错误，所以它不是来自这个：

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;

我找了又找，但找不到答案...为什么会这样，我知道这是因为递归函数，从我读过的内容来看，但我不明白为什么会这样正在引起...

OS：拱门Linux
打字稿：4.5.5
Node.js: 16.13.2

Answer 1

更新：该问题已在刚刚发布的 7.17.4 中得到修复。您的构建应该没有问题。

这似乎是一个@babel/core update (7.17.3) today. Pinning的问题@babel/core到7.17.2似乎已经解决了一些问题

Redux Provider 导致超出最大调用堆栈大小

Redux Provider causes Maximum call stack size exceeded

typescript

reactjs

redux

tsx

react-redux