我的异步操作在我的 react redux 工具包切片中无休止地调用

Question

当我使用 useSelector 订阅商店时，我的 Redux-async 函数无休止地调用并挂起我的系统。

我的产品切片

    import { createSlice } from '@reduxjs/toolkit'

    import { apiCallBegan } from './../../app/store/api/api.action';
    const productSlice = createSlice({
        name: 'product',
        initialState: {
            products: [],        
        },
        reducers: {                
            productsReceived: (state, action) => {
                state.products=action.payload
            }
        }
        
    })
    export const { addProducts,productsReceived } = productSlice.actions
    
    export const loadProducts = () => apiCallBegan({
        url: "/product/",
        method: "get",
        onSuccess: productsReceived.type
    })

    export const getProducts = (state) => state.product.products


    export default productSlice.reducer

ProductList.js 使用 Reducer 实现：

    const dispatch = useDispatch()
    dispatch(loadProducts())
    const products=useSelector(state=>state.product.products)
    console.log(products)

Answer 1

我认为这是问题所在：

const dispatch = useDispatch();
dispatch(loadProducts());
const products = useSelector(
  (state) => state.product.products
);
console.log(products);

这是在产品更改时重新渲染的组件中，同时也更改了产品。也许您只能在 mount 上获得产品：

const dispatch = useDispatch();
React.useEffect(() => dispatch(loadProducts()), [
  dispatch,
]);