Javascript 在每个渲染上分派操作

我在ProductList组件的每个挂载上分派action addProducts，而我希望使用useEffect钩子一次性分派action，并将数据存储在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)

---

您可以只在组件中分派操作，但在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,
  });
};

---

在您的组件中，您可以在每次呈现时分派操作，如果您的页面有多个组件分派此操作，则您可以在组件中分派操作。

您可以在组件中分派操作，但在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,
  });
};

---

在您的组件中，您只需在每个呈现中分派，如果您的页面有多个组件分派此操作，则您可以执行一个。您想使用if检查产品是否已在redux中！产品{…}例如

---

您想用if检查产品是否已经在redux中！产品{…}例如

---

为什么burdon将组件与逻辑结合起来，这应该在操作中。>这应该在操作中。我不认为这真的很重要，它可以，但我不想走得太远。无论哪种方式，它都回答了用户的问题。那么你就不理解redux了。如果从缓存中获取或获取的操作不是您应该放在组件中的内容，则操作指示在这种情况下发生的事情组件需要数据。如果确实需要这样做，则将cache=true或其他内容传递给动作创建者。如果你以后更改缓存的工作方式，你需要更改所有发送动作的代码，而不是只更改一个动作。我喜欢你的热情，我明白你的观点，但就回答用户问题而言，这并没有多大变化。答案也有亨德指出的问题，如果一个渲染周期多次调度该操作，则仍会多次获取。现在你有了多个组件，它们需要一些额外的逻辑，所有这些都需要改变，你明白我想表达的观点吗？工作并不意味着它很容易维护。为什么burdon需要使用逻辑的组件，这应该在操作中。>这应该在操作中。我不认为这真的很重要，它可以，但我不想走得太远。无论哪种方式，它都回答了用户的问题。那么你就不理解redux了。如果从缓存中获取或获取的操作不是您应该放在组件中的内容，则操作指示在这种情况下发生的事情组件需要数据。如果确实需要这样做，则将cache=true或其他内容传递给动作创建者。如果你以后更改缓存的工作方式，你需要更改所有发送动作的代码，而不是只更改一个动作。我喜欢你的热情，我明白你的观点，但就回答用户问题而言，这并没有多大变化。答案也有亨德指出的问题，如果一个渲染周期多次调度该操作，则仍会多次获取。现在你有了多个组件，它们需要一些额外的逻辑，所有这些都需要改变，你明白我想表达的观点吗？工作并不意味着它易于维护。您不应该在组件中添加此逻辑，组件应该只调度操作，操作可以决定是否要获取产品。如果希望组件指示是否需要新数据，最多可以将cache=true传递给动作创建者。@HMR我必须承认。。。你的回答很直截了当。。而且干净！您不应该在组件中添加此逻辑，组件应该只调度该操作，该操作可以决定是否要获取产品。如果希望组件指示是否需要新数据，最多可以将cache=true传递给动作创建者。@HMR我必须承认。。。你的回答很直截了当。。而且干净！你不知道axios api调用需要多长时间。。。在此期间，处于状态的产品将为空。。。因此，它们可能是多个组件触发相同的操作，从而导致对axios.get的多个调用@答案中提到的亨德尔·萨赫利广告；如果它可以在一个渲染周期内调度。您不知道axios api调用需要多长时间。。。在此期间，处于状态的产品将为空。。。因此，它们可能是多个组件触发相同的操作，从而导致对axios.get的多个调用@答案中提到的亨德尔·萨赫利广告；如果可以在一个渲染周期内调度。

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

const ProductList = () => {
  const dispatch = useDispatch();
  const products = useSelector((state) => state.products);
  useEffect(() => {
   if (!products) {
     dispatch(addProducts()); 
   }
  },[dispatch]);
  return <p>foo</p>
}