redux useDispatch - страница постоянно обновляется

Question

Когда я использую useDispatch в useEffect, он постоянно перезагружает весь компонент

Это мои действия:

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}))
};

Это мои редукторы:

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 основана на том, что вы предоставили.

Все, что вызывает непреднамеренное обновление, должно быть вызвано компонентом выше в вашем приложении, который является подверженные влиянию изменений состояния редукции.

Когда компонент обертки, подписанный на состояние избыточности, испытывает изменение состояния, он будет перерисован заново. Это может вызвать изменение в том, какие компоненты смонтированы / демонтированы.

В вашем случае что-то вызывает перемонтирование маршрутизатора, а это означает, что все компоненты в маршрутах с хуком useEffect будут запускать эти монтажные эффекты снова.