在每个渲染上调度动作

Question

我在 ProductList 组件的每个挂载上调度动作 addProducts 而我想使用 useEffect 钩子调度动作一次并将数据存储在 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

您可以只在组件中调度操作，但如果产品可用，则在 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。

Answer 2

您想使用if(!products){...} 来检查产品是否已在 redux 中，例如

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>
}

Answer 3

export const addProducts = () => async dispatch => {
  dispatch({
    type: ADD_PRODUCTS_START,
    payload: { loading: true },
  });

  const Products = await axios.get(
    'https://api.npoint.io/2a4561b816e5b6d00894'
  );

  dispatch({
    type: ADD_PRODUCTS_SUCCESS,
    payload: { products: Products.data, loading: false },
  });
};

const ProductList = ({ products, loading }) => {
  useEffect(() => {
    if (!products && !loading) {
      dispatch(addProducts());
    }
  }, []);
};


const mapStateToProps = ({ products: { data, loading } }) => ({ products: data, loading });