javascript - 在每个渲染上调度 Action

Question

我在 ProductList 组件的每次安装上调度操作 addProducts ，而我想使用 useEffect 钩子(Hook)调度一次操作并将数据存储在 redux 中然后使用它。

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

actions.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)

Answer 1

您可以只在组件中分派(dispatch)该操作，但如果产品可用，则在 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,
  });
};

在你的组件中，你可以只在每个渲染上调度，如果你的页面有多个组件调度此操作，那么你可以创建一个 grouped action 。