Question

我正在尝试使用Redux和React钩子消耗一个api但我有问题，因为它没有调用我的操作

退货调度

由于某种原因，他没有参加我的调度我不知道哪里出问题或如何解决

我的动作：

const FetchSucess = data  => ({
    type:FETCH_SUCESS,
    data
});
const FetchFailed = error  => ({
    type:FETCH_FAIL,
    error
});
const isLoadingFetch = () => ({type: FETCH_LOADING})

export const getAllProducts = () => {
    return dispatch => {
        dispatch(isLoadingFetch());
        api.get('/products')
        .then( response => { console.log(response);})
        .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 { getAllProducts } from '../store/actions/fetch/index'
const useStyles = makeStyles(styles);

export default function Cards() {

    const classes = useStyles();

    const dispatch = useDispatch(getAllProducts());
    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}
    );
}

我已经测试过，显然我的redux正在运行，它使我恢复了正常状态它达到了我的目的，但没有调用我的api来调用我的函数：

return dispatch => {
    dispatch (isLoadingFetch ());
    api.get ('/ products')
    .then (response => {console.log (response);})
    .catch (err => {dispatch (FetchFailed (err.message));});
}

我的商店

import { createStore, applyMiddleware } from 'redux';
import thunk from 'redux-thunk';
import rootReducer from './rootReducer';

export default function configureStore(initialState) {
    return createStore(
        rootReducer,
        applyMiddleware(thunk)
    );
}

和我的减速机组合器

import { combineReducers } from 'redux'
import fetchReducer from '../reducers/fetch/index'
export default combineReducers({
    data: fetchReducer
});

Answer 1

首先，您使用useDispatch错误。

它必须像这样使用：

const dispatch = useDispatch();

然后您可以像这样使用它：

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

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

第二，您需要像这样从useSelector中提取产品：

  const products = useSelector(state => state.data.products)

然后您需要在此处使fetchSuccess变通

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

因此所有组件代码都可以像这样显示您的产品：（请注意，我简化了渲染以仅显示产品名称）

import React from "react";
import { useDispatch, useSelector } from "react-redux";
import { useEffect, useCallback } from "react";
import { getAllProducts } from "../store/actions/fetch/index";

export default function Cards() {

  const dispatch = useDispatch();

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

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

  const products = useSelector(state => state.data.products); // OR  state.data.filteredProducts

  console.log("products:", products);

  if (products && products.length > 0) {
    return (
      <div>
        {products.map(product => (
          <li key={product.id}>{product.name}</li>
        ))}
      </div>
    );
  } else {
    return <div>No products</div>;
  }
}

使用redux和thunks分发的reactjs不起作用

1 个答案: