Redux Toolkit 在页面加载和页面更改时分派两次答案

【问题标题】：Redux Toolkit dispatches twice on page load and page changeRedux Toolkit 在页面加载和页面更改时分派两次
【发布时间】：2022-09-23 06:50:09
【问题描述】：

我的 React 应用程序中有几个页面。每次当用户单击页面时，我都想发送一个获取请求以获取数据并将其设置到商店。但由于某种原因，Redux Toolkit 在应用加载和 page3 加载时也会分派两次。因此，当页面加载或用户在 page3 和其他页面之间切换时，每次都会发出两个 fetch 请求。

如何解决？

应用程序.tsx

import { NavLink, Route, Routes } from \"react-router-dom\";
import \"./styles.css\";
import Todo from \"./Todo\";

const App = () => {
  const routes = [
    {
      path: \"/\",
      element: <div className={\"page1\"}>Page 1</div>
    },

    {
      path: \"/page2\",
      element: <div className={\"page2\"}>Page 2</div>
    },

    {
      path: \"/page3\",
      element: <Todo />
    }
  ];

  return (
    <div className=\"App\">
      <div className=\"Navigation\">
        <NavLink to={\"/\"}>Page 1</NavLink>
        <NavLink to={\"/page2\"}>Page 2</NavLink>
        <NavLink to={\"/page3\"}>This sends a request</NavLink>
      </div>

      <div className=\"Content\">
        <h2>Content</h2>
        <Routes>
          {routes.map((route: any) => (
            <Route path={route.path} element={route.element} key={route.path} />
          ))}
        </Routes>
      </div>
    </div>
  );
};

export default App;

待办事项组件

   import { useEffect } from \"react\";
    import { useDispatch } from \"react-redux\";
    import { AppDispatch } from \"./store/store\";
    import { fetchTodo } from \"./store/TodoSlice\";
    
    const Todo: React.FC = () => {
      const dispatch = useDispatch<AppDispatch>();
    
      useEffect(() => {
        dispatch(fetchTodo());
      }, []);
    
      return <div className={\"page3\"}>This dispatches twice</div>;
    };
    
    export default Todo;

存储切片

import { createAsyncThunk, createSlice } from \"@reduxjs/toolkit\";

export interface ICategoryState {
  todo: any[];
  isLoading: boolean;
}

const initialState: ICategoryState = {
  todo: [],
  isLoading: false
};

const BASE_URL = \"https://jsonplaceholder.typicode.com/todos\";

export const fetchTodo = createAsyncThunk(\"todos/fetchTodo\", async () => {
  const response = await fetch(BASE_URL);
  const data = await response.json();
  return data as any[];
});

export const todoSlice = createSlice({
  name: \"todos\",
  initialState,
  reducers: {},

  extraReducers: (builder) => {
    builder.addCase(fetchTodo.pending, (state, action) => {
      state.isLoading = true;
      console.log(\"Start loading\");
    });

    builder.addCase(fetchTodo.fulfilled, (state, { payload }) => {
      state.todo = payload;
      state.isLoading = false;
    });

    builder.addCase(fetchTodo.rejected, (state, { payload }) => {
      console.log(\"Error happened\");
      state.isLoading = false;
    });
  }
});

export default todoSlice.reducer;

这里也有一个代码框：https://codesandbox.io/s/ecstatic-cookies-xicjxp?file=/src/App.tsx

标签： reactjs react-redux redux-toolkit

【解决方案1】：

默认情况下，CRA 创建以严格模式运行的应用程序，这会导致具有空依赖项数组的 useEffects 在加载时运行两次。它应该帮助人们编写更好的反应代码。当然，这只发生在开发模式下。只需删除标签

<严格模式>

在 index.tsx 中，它将按需要工作。我已经更正了your sandbox。

【讨论】：