我的异步操作在我的反应 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

产品列表.js使用减速器实现：

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

这是在一个组件中，当产品更改时重新呈现，同时也更改产品。也许您只能安装产品：

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