我的React Redux工具包片中无休止地调用了我的异步操作

时间:2020-07-06 02:41:16

标签: reactjs redux react-redux redux-toolkit

当我使用useSelector订阅商店时,我的Redux异步函数不断调用并挂起我的系统。

我的产品。切片

    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)

1 个答案:

答案 0 :(得分:0)

我认为这是问题所在

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

位于组件中,该组件在产品更改时也会重新渲染,同时还要更改产品。也许您只能将产品挂载:

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