1

useSelector を使用してストアにサブスクライブすると、Redux-async 関数が際限なく呼び出され、システムがハングします。

My Product.Slice

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

1 に答える 1

0

これが問題だと思います：

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

これは、製品を変更しながら製品を変更したときに再レンダリングするコンポーネントにあります。おそらく、マウントされた製品のみを取得できます。

const dispatch = useDispatch();
React.useEffect(() => dispatch(loadProducts()), [
  dispatch,
]);
于 2020-07-06T07:45:02.150 に答える