时间戳

首页 > 解决方案 > 在每个渲染上调度动作

javascript - 在每个渲染上调度动作

问题描述

我在 ProductList 组件的每个挂载上分派操作addProducts而我想使用 useEffect 钩子分派一次操作并将数据存储在 redux 中然后使用它。

下面是我的操作文件和 ProductList 组件文件。

动作.js 文件

export const addProducts = () => async (dispatch) => {
  let Products = await axios.get("https://api.npoint.io/2a4561b816e5b6d00894");
  return dispatch({
    type: ADD_PRODUCTS,
    payload: Products.data,
  });
};

ProductList.js 组件文件

import { addProducts } from "../actions/Index";
const ProductList = () => {
  const dispatch = useDispatch();
  useEffect(() => {
   dispatch(addProducts()); 
  },[]);
  const Products = useSelector((state) => state.products);
  console.log(Products)

标签： javascriptreactjsreduxuse-effect

解决方案

您可以只在组件中调度操作，但如果产品可用，则在 thunk 操作中不执行任何操作：

export const addProducts = () => async (
  dispatch,
  getState,//thunk also get a getState function
) => {
  //you should write a dedicated selector function so you could do:
  //  const productsInState = selectProducts(getState())
  const productsInState = getState().products
  //whatever would make state.products available
  //  reducers are missing in your question
  if(productsInState){
    //do nothing if products are already in state
    return;
  }
  let Products = await axios.get(
    'https://api.npoint.io/2a4561b816e5b6d00894',
  );
  return dispatch({
    type: ADD_PRODUCTS,
    payload: Products.data,
  });
};

在您的组件中，您可以只在每个渲染上分派，如果您的页面有多个分派此操作的组件，那么您可以进行分组操作。

推荐阅读