使用分派反应挂钩分派动作

Question

您好，我在使用 usedispatch 调用我的操作时遇到问题

他到达了我的行动，但出于某种原因他没有传递我的 return。停在这里：console.log('here is get all products'); 不要去我的 getallproducts:

export const getAllProducts = () => {
    console.log('here is get all products');
    return dispatch => {
        dispatch(isLoadingFetch());
        api.get('/products')
        .then( response => { dispatch(FetchSucess(response.data))})
        .catch( err => { dispatch(FetchFailed(err.message));});
    }
}

我的减速器：

import {FETCH_FAIL, FETCH_SUCESS, FETCH_LOADING} from '../../actions/fetch/actionType';

const initialState = {
    loading: false,
    products: [],
    filteredProducts: [],
    fn:[],
    mw:[],
    ft:[],
    ww:[],
    bs:[],
    stattrek:[],
    normal:[],
    error: null
  };

  export default function productReducer(state = initialState, action) {
    switch (action.type) {
      case FETCH_LOADING:
        return {
          ...state,
          loading: true
        };
      case FETCH_SUCESS:
        return {
          ...state,
          loading: false,
          error: null,
          filteredProducts: action.data.listProducts,
          products: action.data.listProducts,
          fn: action.data.fn,
          mw: action.data.mw,
          ft: action.data.ft,
          ww: action.data.ww,
          bs: action.data.bs,
          stattrek: action.data.listProducts.filter(value=> value.id_types === 1),
          normal: action.data.listProducts.filter(value=> value.id_types === 2)
        };
      case FETCH_FAIL:
        return {
          ...state,
          loading: false,
          error: action.error
        };
      default:
        return state;
    }
  }

我的容器：

import styles from "../assets/cardStyle";
import { useDispatch, useSelector } from "react-redux";
import {useEffect, useCallback} from "react";
import { getAllProducts } from '../store/actions/fetch/index'
const useStyles = makeStyles(styles);

export default function Cards() {

    const classes = useStyles();

    const dispatch = useDispatch();

    const loadProducts= useCallback(async () => {
        dispatch(getAllProducts());
        }, [dispatch]);

        useEffect(() => {
            loadProducts();
            }, [loadProducts]);

    const products = useSelector(state => {
    })

    products.map(product=>(
        <div>
        <Container fixed>
            <Grid container direction="row" >
                <Grid item xs={3}>
                    <Card className={classes.card}>
                        <CardContent className= {classes.cardCarousel}>
                            <Typography variant="body2" color="textSecondary" component="p">
                                This impressive paella is a perfect party dish and a fun meal to cook together with your
                                guests. Add 1 cup of frozen peas along with the mussels, if you like.
                            </Typography>
                        </CardContent>
                    </Card>

                </Grid>
            </Grid>
        </Container>
    </div> 
    ))

    return (
        {products}
    );
}

我无法想象我哪里出错了它调用我的 getAllProducts 但没有输入我的 redux

Answer 1

如果您需要像在 getAllProducts() 中那样创建返回另一个函数的高阶函数，您需要调用该函数并将 dispatch 作为第一个参数传递。

const loadProducts= useCallback(() => {
    /**
     * first call returns a function from getAllProducts
     * second will call it and we pass dispatch as the first argument 
     */ 
    getAllProducts()(dispatch);
}, [dispatch, getAllProducts]);

或者您可以简单地在第一个函数中传递 dispatch 并立即调用它：

export const getAllProducts = (dispatch) => {
    console.log('here is get all products');
    dispatch(isLoadingFetch());
    // fetching data
    api.get('/products')
        .then( response => { dispatch(FetchSucess(response.data))})
        .catch( err => { dispatch(FetchFailed(err.message));});
}
// ...
const loadProducts= useCallback(() => {
    /**
     * first call pass dispatch as the first argument
     */ 
    getAllProducts(dispatch);
}, [dispatch, getAllProducts]);

Answer 2

您可以继续在位于此处的文件中导入 useDispatch 挂钩 ../store/actions/fetch/index

类似于您在其他文件中所做的方式

使用分派反应挂钩分派动作

react hooks dispatch action with use dispatch

reactjs

react-hooks