反应钩子调度操作与使用调度

Question

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

他到达了我的行动，但由于某种原因，他没有通过我的回归。 停在这里：控制台.log("这里是获取所有产品"(; 并且不去我的 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

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