反应 redux useselector 导致重新渲染

Question

我正在使用 react 和 redux toolkit 以及 redux-persist。当在 useEffect 中发出 http 请求时，它会导致组件重新渲染无限次，即使数据没有改变，所以问题出在 useSelector，我什至尝试过 shallowEqual 函数，也没有严格模式，但它不起作用。

import { createSlice } from '@reduxjs/toolkit';

const cartReducer = createSlice({
  name: 'cart',
  initialState: {
    ids: [],
  },
  reducers: {
    cartAction: (state, action) => {
      const checkId = state.ids.findIndex((item) => item === action.payload);
      if (checkId === -1) {
        state.ids = [...state.ids, action.payload];
      }
    },
  },
});

import { configureStore } from '@reduxjs/toolkit';
import { combineReducers } from 'redux';
import storage from 'redux-persist/lib/storage';
import { persistReducer } from 'redux-persist';
import {
  persistStore,
  FLUSH,
  PAUSE,
  REGISTER,
  PERSIST,
  REHYDRATE,
  PURGE,
} from 'redux-persist';

import cartReducer from '../redux/cartRedux';

const reducers = combineReducers({
  cart: cartReducer,
});

const persistConfig = {
  key: 'cartItems',
  storage,
};

const persistedReducer = persistReducer(persistConfig, reducers);

const store = configureStore({
  reducer: persistedReducer,
  middleware: (getDefaultMiddleware) =>
    getDefaultMiddleware({
      serializableCheck: {
        ignoredActions: [REGISTER, FLUSH, PAUSE, PERSIST, REHYDRATE, PURGE],
      },
    }),
});

let persistors = persistStore(store);

import { useSelector, shallowEqual } from 'react-redux';

let cartItemsId = useSelector((state) => state.cart.ids, shallowEqual);
const [loading, setLoading] = useState(false);
const [products, setProducts] = useState([]);

  useEffect(() => {
    const getCartProductsById = async () => {
      setLoading(true); 
      return await axios
        .post('/getMultipleProducts', cartItemsId)
        .then((response) => {
          setLoading(false);
          setProducts(response.data);
          console.log(products);
        })
        .catch((error) => {
          setLoading(false);
          console.log(error);
        });
    };
    getCartProductsById();
  }, [cartItemsId,products]);

Answer 1

这与 Redux 完全无关。

你的无限循环是由setProducts(response.data);和依赖数组引起的。

您的 useEffect 具有 products 作为依赖项，因此如果 products 发生更改，它将向服务器发出新请求 - 在该请求设置之后，这些产品将成为新的对象，即使该对象具有相同的内容。所以依赖关系发生变化，从而触发新的循环 useEffect.

反应 redux useselector 导致重新渲染

react redux useselector causing rerender

reactjs

redux

react-redux