Reactjs 使用调度对调度操作作出反应

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

他到达我的行动，但由于某种原因，他没有通过我的回报。 停在这里：console.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}
    );
}

从“./assets/cardStyle”导入样式；
从“react redux”导入{useDispatch，useSelector}；
从“react”导入{useffect，useCallback}；
从“../store/actions/fetch/index”导入{getAllProducts}
const useStyles=生成样式（样式）；
导出默认功能卡（）{
const classes=useStyles（）；
const dispatch=usedpatch（）；
const loadProducts=useCallback（异步（）=>{
调度（getAllProducts（））；
}，[发送]；
useffect（（）=>{
loadProducts（）；
}，[loadProducts]）；
常量产品=使用选择器（状态=>{
})
products.map（product=>(
这道令人印象深刻的海鲜饭是一道完美的聚会菜肴，也是一顿与您的家人一起烹调的有趣的晚餐
客人。如果你喜欢的话，加一杯冻豌豆和贻贝。
))
返回(
{产品}
);
}

我无法想象我会错在哪里

---

它调用my getAllProducts，但不输入my redux

如果需要像在

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]);

---

如果您需要像在

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]);

---

您可以继续导入

useDispatch

钩子，该钩子位于此处的文件

。/store/actions/fetch/index

---

与您在其他文件中所做的方式类似，您只需继续并在位于此处的文件中导入

useDispatch

钩子

。/store/actions/fetch/index

---

---

与您在其他文件中所做的类似，dispatch在该功能范围内不可用。将其作为参数传递给函数。我如何才能做到这一点？我需要传递useDispatch？dispatch在该功能范围内不可用。将其作为参数传递给函数。我如何才能做到这一点？我需要把我的电子邮件转给你吗？谢谢你，兄弟，你能再问我一个问题吗？我用：const products=useSelector（state=>state.data）保存我的状态，但是当我尝试给出.map时，我有一个错误。map不起作用。我想问题可能是你还没有收到数据，并且它是

未定义的

，你可以检查一下，然后在上面调用

.map

。问题是，我没有传递数组，但现在我传递了一个数组并得到了以下错误：错误：对象作为React子对象无效（找到：具有键{id，name，float，price，id_sub，subcategory，id_type，type，id_ext，outer，img，description}的对象）。如果要呈现子对象集合，请改用数组。您正在尝试将对象呈现为子对象。在dev中，您只需将其包装在

JSON.stringify（product）

中即可查看内容。谢谢兄弟，您能再问我一个问题吗？我用：const products=useSelector（state=>state.data）保存我的状态，但是当我尝试给出.map时，我有一个错误。map不起作用。我想问题可能是你还没有收到数据，并且它是

未定义的

，你可以检查一下，然后在上面调用

.map

。问题是，我没有传递数组，但现在我传递了一个数组并得到了以下错误：错误：对象作为React子对象无效（找到：具有键{id，name，float，price，id_sub，subcategory，id_type，type，id_ext，outer，img，description}的对象）。如果要呈现子对象集合，请改用数组。您正在尝试将对象呈现为子对象。在dev中，您可以将其包装在

JSON.stringify（product）

中查看内容。而不是在我的容器中使用useDispatch在我的操作中使用useDispatch？您能给我一个例子吗？是的，就像您在操作中使用dispatch那样，您的容器将重点放在组件逻辑上。不要这样做。如果在某个时候需要更改何时调用

getAllProducts（）

then

useDispatch（）的逻辑，那么应该在每个组件的开头无条件地调用钩子

将被有条件地调用，并且肯定会破坏您的逻辑。与其在我的容器中使用useDispatch，不如在我的操作中使用useDispatch？您能给我一个例子吗？是的，就像您在操作中使用dispatch那样，您的容器将重点放在组件逻辑上。不要这样做。钩子应该在每个组件的开头被无条件地调用，如果在某个时刻您需要更改何时调用

getAllProducts（）

的逻辑，那么

useDispatch（）

将被有条件地调用，并且肯定会破坏您的逻辑。