React生态下的 dva + umi 购物车案例实现

前端

2023-12-14 12:46:45

前言

在前端开发中，我们经常需要构建一些复杂的数据驱动的应用。为了管理这些应用中的数据，我们需要使用一些状态管理框架。dva和umi就是两个非常流行的状态管理框架。

dva是基于Redux的状态管理框架，它提供了丰富的API和插件，可以帮助我们轻松地管理应用中的数据。umi是一个基于dva的应用框架，它集成了路由、数据请求、状态管理等功能，可以帮助我们快速地构建前端应用。

dva + umi购物车的实现

在这个案例中，我们将使用dva和umi来构建一个简单的购物车应用。这个应用的主要功能是：

展示商品列表
将商品添加到购物车
从购物车中移除商品
计算购物车的总价格

我们首先需要创建一个新的umi项目。可以使用以下命令来创建一个新的umi项目：

npx create-umi my-app

然后，我们需要在项目中安装dva。可以使用以下命令来安装dva：

npm install dva

接下来，我们需要在项目中创建models、services、routes等文件。

models

src/models/products.js

import { queryProducts } from '../services/products';
import { message } from 'antd';

export default {
  namespace: 'products',

  state: {
    list: [],
  },

  effects: {
    *fetchProducts(_, { call, put }) {
      const response = yield call(queryProducts);
      yield put({
        type: 'saveProducts',
        payload: response.data,
      });
    },
  },

  reducers: {
    saveProducts(state, action) {
      return {
        ...state,
        list: action.payload,
      };
    },
  },
};

services

src/services/products.js

import request from '../utils/request';

export async function queryProducts() {
  return request('/api/products');
}

routes

src/routes/index.js

import React from 'react';
import { Route, Switch } from 'umi';
import Products from './Products';
import ShoppingCart from './ShoppingCart';

export default function Index() {
  return (
    <Switch>
      <Route path="/products" component={Products} />
      <Route path="/shopping-cart" component={ShoppingCart} />
      <Route path="/" component={Products} />
    </Switch>
  );
}

components

src/pages/Products/index.js

import React, { useEffect } from 'react';
import { connect } from 'dva';
import { Button, Col, Row } from 'antd';
import ProductItem from '../../components/ProductItem';

function Products({ products, dispatch }) {
  useEffect(() => {
    dispatch({
      type: 'products/fetchProducts',
    });
  }, []);

  return (
    <div>
      <Row gutter={16}>
        {products.list.map((product) => (
          <Col key={product.id} span={6}>
            <ProductItem product={product} />
          </Col>
        ))}
      </Row>
    </div>
  );
}

export default connect(({ products }) => ({ products }))(Products);

src/pages/ShoppingCart/index.js

import React, { useEffect, useState } from 'react';
import { connect } from 'dva';
import { Button, Col, Row, Table } from 'antd';

function ShoppingCart({ products, dispatch }) {
  const [cartItems, setCartItems] = useState([]);

  useEffect(() => {
    dispatch({
      type: 'products/fetchProducts',
    });
  }, []);

  const handleAddToCart = (product) => {
    const newCartItems = [...cartItems, product];
    setCartItems(newCartItems);
  };

  const handleRemoveFromCart = (product) => {
    const newCartItems = cartItems.filter((item) => item.id !== product.id);
    setCartItems(newCartItems);
  };

  const columns = [
    {
      title: 'Name',
      dataIndex: 'name',
      key: 'name',
    },
    {
      title: 'Price',
      dataIndex: 'price',
      key: 'price',
    },
    {
      title: 'Quantity',
      dataIndex: 'quantity',
      key: 'quantity',
    },
    {
      title: 'Action',
      key: 'action',
      render: (product) => (
        <Button onClick={() => handleRemoveFromCart(product)}>Remove</Button>
      ),
    },
  ];

  return (
    <div>
      <Row>
        <Col span={12}>
          <Table columns={columns} dataSource={cartItems} />
        </Col>
        <Col span={12}>
          <Button>Checkout</Button>
        </Col>
      </Row>
    </div>
  );
}

export default connect(({ products }) => ({ products }))(ShoppingCart);