React+Redux 实战：打造现代化的电商平台

前言

如今，电商平台已经成为了人们购物的主要渠道之一。在这个大背景下，如何优化电商平台的用户体验，提高网站运营效率便成为了所有电商平台开发者的任务。

React 和 Redux 是当前最流行的前端开发工具，它们可以帮助我们创建高效、可扩展的电商平台。在这篇文章中，我们将会利用 React 和 Redux 技术，打造一个现代化的电商平台，让你的用户更加愉悦地购物。

技术要点

在开始实现我们的电商平台之前，我们先来了解一下我们需要用到的技术要点：

React

React 是一个用于构建用户界面的 JavaScript 库。它可以帮助我们快速地构建高效、可重用的 UI 组件。

Redux

Redux 是一个用于管理应用程序状态的 JavaScript 库。它可以帮助我们创建可靠的应用程序，提供可预测性的代码，并使调试过程更加容易。

React Router

React Router 是一个用于管理应用程序路由的 JavaScript 库。它可以帮助我们创建基于 URL 的导航，并使得我们的应用程序更加直观、易于理解。

styled-components

styled-components 是一个用于构建可重用组件的 CSS-in-JS 库。它可以让我们将 CSS 样式作为 React 组件编写，并提供了许多特性，如动画和主题支持。

Axios

Axios 是一个用于发送 HTTP 请求的 JavaScript 库。它可以帮助我们与后端服务器交互，获取数据并将其显示在我们的应用程序中。

实战操作

现在，我们已经具备了基本的技术要点，让我们进入实战阶段。

整体架构

我们的电商平台包含多个页面，如首页、登录页面、注册页面、商品详情页面、购物车页面等。我们将使用 React Router 来管理这些页面并以单页应用程序的方式呈现给用户。

我们的购物平台包含了许多交互式组件，比如商品列表、商品详情、购物车、登录、注册等。我们将使用 React 组件化的思想来构建这些组件。

我们的购物平台会从后端服务器获取数据并将其显示给用户。我们将使用 Axios 库来发送 HTTP 请求，从后端服务器获取数据。

实现

让我们来实现我们的电商平台吧。

安装依赖

首先，我们需要安装一些依赖：

npm install --save react redux react-redux react-router-dom styled-components axios

这些依赖包将会帮助我们实现我们的购物平台。

构建组件

接下来，我们可以开始构建我们的组件了。让我们从最基本的组件开始——页面布局。

我们需要创建一个 Layout 组件，该组件将包含所有的页面，并将它们呈现给用户。这是一个很简单的组件，它只需要一个 children 属性，它将在页面中呈现其他组件。这是 Layout 组件的示例代码：

// javascriptcn.com 代码示例
import React from 'react';
import styled from 'styled-components';

const Container = styled.div`
  margin: 0 auto;
  max-width: 1200px;
  padding: 0 16px;
`;

const Layout = ({ children }) => (
  <Container>
    { children }
  </Container>
);

export default Layout;

然后，我们需要创建一个 Header 组件，该组件将包含网站的页头。这个组件是另一个简单的组件，它只需要一些文本和链接。这是 Header 组件的示例代码：

// javascriptcn.com 代码示例
import React from 'react';
import styled from 'styled-components';

const Wrapper = styled.div`
  background-color: #ffffff;
  height: 80px;
  padding: 16px;
`;

const Logo = styled.img`
  height: 48px;
`;

const Nav = styled.nav`
  display: flex;
  justify-content: flex-end;
`;

const Link = styled.a`
  margin: 0 16px;
`;

const Header = () => (
  <Wrapper>
    <Logo src="logo.png" />
    <Nav>
      <Link href="/">Home</Link>
      <Link href="/about">About</Link>
    </Nav>
  </Wrapper>
);

export default Header;

现在，我们已经创建了两个基本组件，我们可以向它们添加更多的组件，以构建我们的购物平台。

创建应用状态

接下来，我们需要创建应用程序状态，这将使我们可以轻松地共享数据和访问状态，并提供可重复的状态更新。

我们将使用 Redux 来管理应用状态。我们需要创建一个 Redux 存储器和一个根 Reducer。这是一个非常简单的根 Reducer 示例：

import { combineReducers } from 'redux';

const rootReducer = combineReducers({
  // 应用程序状态将在这里
});

export default rootReducer;

现在，我们已经创建了一个简单的根 Reducer，下一步是安装 Redux 存储器。

// javascriptcn.com 代码示例
import { createStore, applyMiddleware } from 'redux';
import thunkMiddleware from 'redux-thunk';
import rootReducer from './reducers';

const store = createStore(
  rootReducer,
  applyMiddleware(thunkMiddleware),
);

export default store;

这里我们创建了一个存储器，它将我们的根 Reducer 传递给 createStore() 函数。然后，我们应用了一个名为 thunkMiddleware 的 Redux 中间件。这个中间件将允许我们向我们的应用程序中添加异步行为。

创建一个数据服务

接下来，我们需要创建一个数据服务，它将允许我们从后端服务器获取数据。我们将使用 Axios 来发送 HTTP 请求，并使用 Promise 来处理异步操作。这里有一个非常简单的数据服务：

import axios from 'axios';

const baseUrl = 'http://localhost:3000';

export const fetchData = (url) => 
  axios.get(`${baseUrl}${url}`).then(response => response.data)

这里我们向数据服务传递一个 URL，该服务将使用 Axios 发送 HTTP GET 请求并解析响应。最后，它将返回我们需要的数据。

创建购物车 Redux 状态

接下来，我们需要创建 Redux 状态来管理购物车。这个状态将允许我们跟踪用户添加到购物车中的商品，并在访问购物车页面时显示这些商品。

// javascriptcn.com 代码示例
const DEFAULT_STATE = {
  products: [],
};

export const ADD_PRODUCT = 'ADD_PRODUCT';

export const addProduct = (product) => ({ type: ADD_PRODUCT, payload: product });

export default function cartReducer(state = DEFAULT_STATE, action) {
  switch (action.type) {
    case ADD_PRODUCT:
      return { ...state, products: [...state.products, action.payload] };
    default:
      return state;
  }
}

这里我们定义了一个名为 cartReducer 的新 Reducer，该 Reducer 将存储用户所添加的商品。我们还定义了一个 ADD_PRODUCT 常量，并创建了一个 addProduct() 创建器函数。

构建商品列表

接下来，我们可以构建我们的第一个交互式组件——商品列表。这个组件将允许用户浏览我们的商品目录，选择他们喜欢的商品，并将它们添加到他们的购物车中。

// javascriptcn.com 代码示例
import React, { useState, useEffect } from 'react';
import styled from 'styled-components';
import { fetchData } from '../../services/data';

const Wrapper = styled.div`
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 24px;
`;

const Product = styled.div`
  border: 1px solid #cccccc;
  padding: 16px;
`;

const Image = styled.img`
  max-width: 100%;
`;

const Button = styled.button`
  background-color: #ff6600;
  color: #ffffff;
  padding: 8px 16px;
  border: none;
  border-radius: 4px;
`;

const ProductList = () => {
  const [products, setProducts] = useState([]);

  useEffect(() => {
    fetchData('/products').then((data) => setProducts(data));
  }, []);

  return (
    <Wrapper>
      {products.map((product) => (
        <Product key={product.id}>
          <Image src={product.image} alt={product.name} />
          <h2>{product.name}</h2>
          <p>{product.description}</p>
          <Button>Add to cart</Button>
        </Product>
      ))}
    </Wrapper>
  );
};

export default ProductList;

这个组件使用了 React 组件的状态和生命周期钩子，它使用了我们之前创建的数据服务来获取数据。然后它指定了一个函数，当用户点击 Add to cart 按钮时，将商品添加到 Redux 状态中。

创建购物车页面

接下来，我们需要构建购物车页面。这个页面会查询我们的购物车 Redux 状态，并呈现用户添加到购物车中的所有商品。

// javascriptcn.com 代码示例
import React from 'react';
import styled from 'styled-components';
import { useSelector } from 'react-redux';

const Wrapper = styled.div`
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
`;

const CartItem = styled.div`
  border: 1px solid #cccccc;
  padding: 16px;
`;

const Cart = () => {
  const products = useSelector((state) => state.cart.products);

  return (
    <Wrapper>
      {products.map((product) => (
        <CartItem key={product.id}>
          <h2>{product.name}</h2>
          <p>{product.description}</p>
        </CartItem>
      ))}
    </Wrapper>
  );
};

export default Cart;

这个组件使用了 Redux Hooks 从 Redux 状态中获取购物车中的商品，并显示这些商品。

创建路由

现在，我们需要创建一些路由来跳转到我们的购物平台的不同页面。

// javascriptcn.com 代码示例
import React from 'react';
import { Switch, Route } from 'react-router-dom';
import ProductList from './components/ProductList';
import Cart from './components/Cart';

const Routes = () => (
  <Switch>
    <Route exact path="/" component={ProductList} />
    <Route exact path="/cart" component={Cart} />
  </Switch>
);

export default Routes;

这里我们使用 React Router 的 Switch 和 Route 组件来定义我们的路由。我们将 / 定义为商品列表页面，将 /cart 定义为购物车页面。

放置 JSX 元素

最后，我们需要将我们的 JSX 元素放在一起，创建我们的页面。

// javascriptcn.com 代码示例
import React from 'react';
import { Provider } from 'react-redux';
import { BrowserRouter as Router } from 'react-router-dom';
import store from './store';
import Routes from './Routes';
import Layout from './components/Layout';
import Header from './components/Header';

const App = () => (
  <Provider store={store}>
    <Router>
      <Layout>
        <Header />
        <main>
          <Routes />
        </main>
      </Layout>
    </Router>
  </Provider>
);

export default App;

这里我们在 Provider 组件中使用 Redux 存储器，并将 React Router 放入 BrowserRouter 组件中。然后我们向 Layout 组件中添加我们的 Header 组件，最后将我们的页面在 main 元素中呈现。

总结

在这篇文章中，我们使用 React 和 Redux 技术，创建了一个现代化的电商平台。我们了解了如何构建高效、可重用的 UI 组件，如何使用 Redux 来管理应用程序状态，如何使用 React Router 来管理页面路由，如何使用 Axios 来发送 HTTP 请求，并从后端服务器获取数据。

我们构建了商品列表和购物车组件，并将它们放在一起构建一个完整的电商平台。这种电商平台的架构可扩展性强，易于维护，能够快速适应日益发展的市场需求，成为了新兴的电商平台的首选技术方案。

希望本篇文章能帮助你了解如何使用 React 和 Redux 技术构建传统电商平台。如果你有更多的疑问或建议，请在评论区留言。

来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/652cc3997d4982a6ebe59733