构建一个使用React和Redux的简单在线书店应用。

简介: 构建一个使用React和Redux的简单在线书店应用。

这个应用将包括书籍列表、书籍详情、添加到购物车以及购物车结算的功能。


  1. 项目初始化

首先,我们需要初始化一个新的React项目,并安装Redux及其相关依赖。

npx create-react-app online-bookstore
cd online-bookstore
npm install redux react-redux redux-thunk


  1. 定义Redux Store和Actions

接下来,我们定义Redux的store、actions和reducers。

actions/bookActions.js

export const ADD_TO_CART = 'ADD_TO_CART';
export const REMOVE_FROM_CART = 'REMOVE_FROM_CART';
export const CLEAR_CART = 'CLEAR_CART';
export function addToCart(book) {
  return { type: ADD_TO_CART, payload: book };
}
export function removeFromCart(bookId) {
  return { type: REMOVE_FROM_CART, payload: bookId };
}
export function clearCart() {
  return { type: CLEAR_CART };
}

reducers/cartReducer.js

import { ADD_TO_CART, REMOVE_FROM_CART, CLEAR_CART } from '../actions/bookActions';
const initialState = {
  cartItems: [],
};
export function cartReducer(state = initialState, action) {
  switch (action.type) {
    case ADD_TO_CART:
      const cartItems = [...state.cartItems];
      const existingItem = cartItems.find(item => item.id === action.payload.id);
      if (existingItem) {
        existingItem.quantity++;
      } else {
        cartItems.push({ ...action.payload, quantity: 1 });
      }
      return { ...state, cartItems };
    case REMOVE_FROM_CART:
      return {
        ...state,
        cartItems: state.cartItems.filter(item => item.id !== action.payload),
      };
    case CLEAR_CART:
      return { ...state, cartItems: [] };
    default:
      return state;
  }
}

store.js

import { createStore, applyMiddleware } from 'redux';
import thunk from 'redux-thunk';
import { cartReducer } from './reducers/cartReducer';
const store = createStore(cartReducer, applyMiddleware(thunk));
export default store;


  1. 创建React组件

components/BookList.js

import React from 'react';
import { connect } from 'react-redux';
import { addToCart } from '../actions/bookActions';
const BookList = ({ books, addToCart }) => (
  <div>
    <h2>Books</h2>
    <ul>
      {books.map(book => (
        <li key={book.id}>
          {book.title} - ${book.price}
          <button onClick={() => addToCart(book)}>Add to Cart</button>
        </li>
      ))}
    </ul>
  </div>
);
const mapStateToProps = state => ({
  // 假设books数据在state的某个地方,这里仅为示例
  books: state.books,
});
export default connect(mapStateToProps, { addToCart })(BookList);

components/Cart.js

import React from 'react';
import { connect } from 'react-redux';
import { removeFromCart, clearCart } from '../actions/bookActions';
const Cart = ({ cartItems, removeFromCart, clearCart }) => (
  <div>
    <h2>Cart</h2>
    <ul>
      {cartItems.map(item => (
        <li key={item.id}>
          {item.title} - ${item.price * item.quantity}
          <button onClick={() => removeFromCart(item.id)}>Remove</button>
        </li>
      ))}
    </ul>
    <button onClick={clearCart}>Clear Cart</button>
  </div>
);
const mapStateToProps = state => ({
  cartItems: state.cartItems,
});
export default connect(mapStateToProps, { removeFromCart, clearCart })(Cart);


  1. 整合React组件和Redux

接下来,我们需要在App组件中整合BookList和Cart组件,并确保Redux store被正确引入和使用。

App.js

import React from 'react';
import { Provider } from 'react-redux';
import store from './store';
import BookList from './components/BookList';
import Cart from './components/Cart';
function App() {
  return (
    <Provider store={store}>
      <div className="App">
        <h1>Online Bookstore</h1>
        <BookList />
        <Cart />
      </div>
    </Provider>
  );
}
export default App;


  1. 添加路由(可选)

为了使应用更具交互性,我们可以使用react-router-dom来添加路由,这样用户就可以在不同的页面之间导航。

首先,安装react-router-dom

npm install react-router-dom

然后,在App.js中添加路由:

App.js(更新后)

import React from 'react';
import { Provider } from 'react-redux';
import store from './store';
import { BrowserRouter as Router, Route, Link } from 'react-router-dom';
import BookList from './components/BookList';
import Cart from './components/Cart';
function App() {
  return (
    <Provider store={store}>
      <Router>
        <div className="App">
          <h1>Online Bookstore</h1>
          <nav>
            <ul>
              <li>
                <Link to="/">Home</Link>
              </li>
              <li>
                <Link to="/books">Books</Link>
              </li>
              <li>
                <Link to="/cart">Cart</Link>
              </li>
            </ul>
          </nav>
          <Route exact path="/" render={() => <h3>Welcome to the Online Bookstore!</h3>} />
          <Route path="/books" component={BookList} />
          <Route path="/cart" component={Cart} />
        </div>
      </Router>
    </Provider>
  );
}
export default App;


  1. 样式和布局

为了提升应用的外观和用户体验,我们可以添加一些CSS样式。这可以通过在项目中创建一个src/styles文件夹,并在其中添加CSS文件来实现。然后,在需要的地方导入这些样式。

  1. 数据模拟

由于我们还没有连接到真实的后端API,我们可以模拟一些书籍数据来填充我们的应用。这可以通过在Redux store的初始化阶段或在组件的state中直接定义数据来实现。

  1. 连接到后端API

一旦我们有了模拟数据并验证了应用的基本功能,我们就可以开始连接到真实的后端API来获取书籍数据和处理购物车操作。这通常涉及使用像axiosfetch这样的HTTP客户端来发送请求到后端服务器。

  1. 测试和部署

最后,我们应该对应用进行测试以确保其正常工作,并准备将其部署到生产环境。测试可以包括单元测试、集成测试和端到端测试。部署则涉及将应用打包为静态文件,并将其部署到Web服务器或云服务上。

总结

这个简单的在线书店应用示例展示了如何使用React和Redux来构建一个具有购物车功能的前端应用。通过添加路由、样式、模拟数据和连接到后端API,我们可以进一步扩展和完善这个应用。希望这个示例能为你提供一个有趣且实用的起点,帮助你进一步学习和掌握React和Redux的使用。

目录
相关文章
|
4天前
|
前端开发 JavaScript 安全
TypeScript在React Hooks中的应用:提升React开发的类型安全与可维护性
【7月更文挑战第17天】TypeScript在React Hooks中的应用极大地提升了React应用的类型安全性和可维护性。通过为状态、依赖项和自定义Hooks指定明确的类型,开发者可以编写更加健壮、易于理解和维护的代码。随着React和TypeScript的不断发展,结合两者的优势将成为构建现代Web应用的标准做法。
|
12天前
|
存储 前端开发 JavaScript
深入浅出React框架:构建高效组件化网页的实战指南
【7月更文挑战第9天】在当今快速发展的前端技术领域,React凭借其强大的组件化思想、高效的虚拟DOM以及丰富的生态系统,成为了构建动态用户界面的首选框架之一。本文将带你深入浅出地探索React的核心概念,并通过实战示例,展示如何利用React构建高效、可维护的组件化网页。
45 8
|
1月前
|
前端开发 JavaScript Linux
分离前后端react和django3构建的应用
【6月更文挑战第4天】在本文中,我们介绍了如何设置React前端并连接到Django后端。并讨论了前后端分离的好处,并计划扩展API以支持更多HTTP操作和用户身份验证功能。
60 5
分离前后端react和django3构建的应用
|
15天前
|
Web App开发 JavaScript 前端开发
react18【系列实用教程】搭建开发环境(2024版)Vite+React (官方推荐)(含@配置,react-developer-tools 和 Redux DevTools 下载安装)
react18【系列实用教程】搭建开发环境(2024版)Vite+React (官方推荐)(含@配置,react-developer-tools 和 Redux DevTools 下载安装)
52 0
|
2月前
|
前端开发 JavaScript API
使用React和GraphQL构建一个简单的博客应用
使用React和GraphQL构建一个简单的博客应用
31 1
|
1月前
|
Python API 前端开发
使用react和django3构建应用
【6月更文挑战第3天】首先,创建Django项目和todos应用,安装必要依赖,配置settings.py并建立数据库模型。通过makemigrations和migrate更新数据库。接着,设置REST_FRAMEWORK的权限为AllowAny,构建API的urls, views, serializers。在todos应用中定义ListTodo和DetailTodo视图,以及TodoSerializer。对于跨域资源共享(CORS),通过django-cors-headers中间件配置白名单。
29 0
|
2月前
|
存储 JavaScript 前端开发
基于React和Redux的待办事项列表应用
基于React和Redux的待办事项列表应用
39 0
|
5天前
|
前端开发 JavaScript Java
React 速通笔记
【7月更文挑战第17天】
11 1
|
11月前
|
前端开发
前端学习笔记202305学习笔记第二十九天-React keep alive原理之2
前端学习笔记202305学习笔记第二十九天-React keep alive原理之2
53 0
|
11月前
|
前端开发
前端学习笔记202306学习笔记第四十八天-react-admin marmelab之8
前端学习笔记202306学习笔记第四十八天-react-admin marmelab之7
35 0