Reactjs react js material.ui和redux

您好，我对如何用我从商店收到的数据填充我的卡有疑问

我有一个使用thunks从后端获取数据的reducer，但我不知道如何使用这种ui结构获取她的状态

我的卡片用户界面组件

import React from "react";
// nodejs library that concatenates classes
import Grid from '@material-ui/core/Grid';
import Container from '@material-ui/core/Container';
import Card from '@material-ui/core/Card';
import CardContent from '@material-ui/core/CardContent';
import Typography from '@material-ui/core/Typography';

// @material-ui/core components
import { makeStyles } from "@material-ui/core/styles";
// @material-ui/icons

// core components
import styles from "../assets/cardStyle";

const useStyles = makeStyles(styles);

export default function Cards() {
    const classes = useStyles();

    return (
        <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>
    );
}

我的减速机：

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 { createStore, applyMiddleware } from 'redux';
import thunk from 'redux-thunk';
import rootReducer from './rootReducer';

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

我的api返回以下内容：

async getAllProduct(req,res){
    try {
        const results = await Products.findAll({
            // raw: true, <= remove
            attributes:['id','name', 'float', 'price','img_product', 'description'],
            include: [{
                model: SubCategory,
                as: 'subcategory',
                attributes: ['id','name'],
            },
            {
                model:Exteriors,
                as: 'exteriors',
                attributes: ['id','name']
            },
            {
                model:Types,
                as: 'types',
                attributes: ['id','name']
            },
        ],
        })
        console.log(results);
        let listProducts= results.map( (products) => {
            return {
                id: products.id,
                name: products.name,
                float: products.float,
                price: products.price,
                id_sub: products.subcategory.id,
                subcategory: products.subcategory.name,
                id_types: products.types.id,
                type: products.types.name,
                id_ext: products.exteriors.id,
                exterior: products.exteriors.name,
                img: products.img_product,
                description: products.description
            }
        })

        const fn = listProducts.filter(v => v.id_ext == 2)
        const mw = listProducts.filter(v => v.id_ext == 3)
        const ft = listProducts.filter(v => v.id_ext == 1)
        const ww = listProducts.filter(v => v.id_ext == 4)
        const bs = listProducts.filter(v => v.id_ext == 5)

        if(listProducts){return res.status(200).json({listProducts,fn,mw,ft,ww,bs})}
        else{return res.status(400).json({result: 'failed to get Products'})}
     } catch (error) {
         console.error(error);
     }
},

异步getAllProduct（请求、恢复）{ 试一试{ const results=await Products.findAll({ //raw：是的{ 返回{ id:products.id， 名称：products.name， float:products.float， 价格：产品价格， id_sub:products.subcategory.id， 子类别：products.subcategory.name， id_类型：products.types.id， 类型：products.types.name， id\U ext:products.exteriors.id， 外部：products.exteriors.name， img:products.img_产品， description:产品名称.description } }) 常量fn=listProducts.filter（v=>v.id\u ext==2） 常量mw=listProducts.filter（v=>v.id\u ext==3） 常量ft=listProducts.filter（v=>v.id\u ext==1） 常量ww=listProducts.filter（v=>v.id\u ext==4） 常量bs=listProducts.filter（v=>v.id\u ext==5） if（listProducts）{return res.status（200）.json（{listProducts，fn，mw，ft，ww，bs}）} else{return res.status（400）.json（{result:'failed to get Products'}）} }捕获（错误）{ 控制台错误（error）； } }, 我基本上需要使用connect并从我的商店获取状态

---

但是我不知道如何在这个结构中实现这一点

你共享了你的存储配置，但没有你的reducer。局外人不可能从中推断出你的存储结构，我们需要实际的reducer。另外，了解API返回的数据结构也很有趣。哦，有点关联：这是一个func选项组件。您可以使用useSelector钩子，无需连接。连接仅对类组件是必需的。@phry omg my bad我以为我放了reducer抱歉我添加了后端返回和reducer使用函数在使用类方面会有任何缺点吗？不，函数可以实现类组件所能实现的一切（除了错误边界，但这不应该经常与您有关）和钩子是一种更现代的编写react的方式。在您的情况下，我不是100%确定您想要实现什么，但是假设您想从组件访问

mw

，那么您只需执行

使用选择器（state=>state.products.mw）

即可访问它（假设您的根reducer将您的

productReducer

放在

products

键上，则您没有共享该键。）

async getAllProduct(req,res){
    try {
        const results = await Products.findAll({
            // raw: true, <= remove
            attributes:['id','name', 'float', 'price','img_product', 'description'],
            include: [{
                model: SubCategory,
                as: 'subcategory',
                attributes: ['id','name'],
            },
            {
                model:Exteriors,
                as: 'exteriors',
                attributes: ['id','name']
            },
            {
                model:Types,
                as: 'types',
                attributes: ['id','name']
            },
        ],
        })
        console.log(results);
        let listProducts= results.map( (products) => {
            return {
                id: products.id,
                name: products.name,
                float: products.float,
                price: products.price,
                id_sub: products.subcategory.id,
                subcategory: products.subcategory.name,
                id_types: products.types.id,
                type: products.types.name,
                id_ext: products.exteriors.id,
                exterior: products.exteriors.name,
                img: products.img_product,
                description: products.description
            }
        })

        const fn = listProducts.filter(v => v.id_ext == 2)
        const mw = listProducts.filter(v => v.id_ext == 3)
        const ft = listProducts.filter(v => v.id_ext == 1)
        const ww = listProducts.filter(v => v.id_ext == 4)
        const bs = listProducts.filter(v => v.id_ext == 5)

        if(listProducts){return res.status(200).json({listProducts,fn,mw,ft,ww,bs})}
        else{return res.status(400).json({result: 'failed to get Products'})}
     } catch (error) {
         console.error(error);
     }
},