javascript - redux useDispatch - 不断重新加载页面

Question

当我在 useEffect 中使用 useDispatch 时，它会不断重新加载整个组件

这是我的操作:

export const getData = () => dispatch => {

    fetch("https://jsonplaceholder.typicode.com/users")
      .then((response) => response.json())
      .then((json) =>
        json.map((obj) => ({
          ...obj,
          bonus: 1500,
          remaining: 230,
          active: Math.floor(Math.random() * 2) === 1 ? "yes" : "no",
        }))
      )
      .then((response) =>
        dispatch({ type: constants.REQUEST_PLAYERS_SUCCESS, payload: response })
      )
      .catch( error => dispatch({type: constants.REQUEST_PLAYERS_FAILED, payload: error}))
};

这是我的 reducer :

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

export const changeGridData = (state = initialState, action = {}) => {
  switch (action.type) {
    case constants.REQUEST_PLAYERS_PENDING:
      return { ...state, isLoading: true };
    case constants.REQUEST_PLAYERS_SUCCESS:
      return { ...state, data: action.payload, isLoading: false};
    case constants.REQUEST_PLAYERS_FAILED:
      return { ...state, isLoading: false };
    default:
      return state;
  }
};

这是组件:

import React, { useState, useEffect } from "react";
import { getData } from "../store/gridPlayersLoad/gridPlayersActions";
import { useDispatch, useSelector } from "react-redux";

const Bonuses = () => {
 const content = useSelector((state) => state); 
 const dispatch = useDispatch();

 useEffect(() => {
   dispatch(getData())
 }, []);

 // Some other code...
}

不断重新加载的原因可能是什么？

Answer 1

根据您提供的内容，您的 useEffect 和 useDispatch 实现没有任何问题。

无论什么原因导致您的无意刷新，都一定是由应用程序中受 redux 状态更改影响的较高组件引起的。

当订阅 redux 状态的包装组件经历状态变化时，它将重新渲染。这可能会导致安装/卸载组件的更改。

在您的情况下，某些原因导致路由器重新安装，这意味着带有 useEffect Hook 的路由中的所有组件将再次运行这些安装效果。