借鉴实战项目，学习React+Redux购物车搜索组件构建

2023-11-23 07:07:56

借助一位业界大神开发的一个React实战项目，笔者一步步的学习了构建购物车和搜索组件的知识，并封装了常用的scroll lazy组件，了解了React Hooks和Redux的状态管理，最终成功完成了这个项目。希望这篇文章对初学者来说会有帮助。

搭建项目

首先，我们需要搭建一个React项目。这里推荐使用create-react-app工具。我们可以通过以下命令来创建项目：

npx create-react-app react-shopping-cart

安装依赖

接下来，我们需要安装必要的依赖。这里需要安装React、Redux、react-redux、axios等库。我们可以通过以下命令来安装：

npm install react redux react-redux axios

创建组件

接下来，我们需要创建购物车和搜索组件。我们可以分别创建两个文件，比如ShoppingCart.js和SearchComponent.js。在ShoppingCart.js文件中，我们可以编写以下代码：

import React, { useState } from 'react';
import { useDispatch } from 'react-redux';
import { addToCart } from './actions/cartActions';

const ShoppingCart = () => {
  const [items, setItems] = useState([]);
  const dispatch = useDispatch();

  const handleAddToCart = (item) => {
    dispatch(addToCart(item));
  };

  return (
    <div>
      <h1>购物车</h1>
      <ul>
        {items.map((item) => (
          <li key={item.id}>
            {item.name}
            <button onClick={() => handleAddToCart(item)}>+</button>
          </li>
        ))}
      </ul>
      <button onClick={() => setItems([])}>清空购物车</button>
    </div>
  );
};

export default ShoppingCart;

在SearchComponent.js文件中，我们可以编写以下代码：

import React, { useState } from 'react';
import { useDispatch } from 'react-redux';
import { searchProducts } from './actions/productActions';

const SearchComponent = () => {
  const [query, setQuery] = useState('');
  const dispatch = useDispatch();

  const handleSearch = (e) => {
    e.preventDefault();
    dispatch(searchProducts(query));
  };

  return (
    <div>
      <h1>搜索组件</h1>
      <form onSubmit={handleSearch}>
        <input type="text" value={query} onChange={(e) => setQuery(e.target.value)} />
        <button type="submit">搜索</button>
      </form>
    </div>
  );
};

export default SearchComponent;

Redux

Redux是一个状态管理库，可以帮助我们管理应用程序的状态。在我们的项目中，我们需要使用Redux来管理购物车中的商品和搜索结果。

首先，我们需要创建一个Redux store。我们可以通过以下代码来创建：

import { createStore } from 'redux';
import rootReducer from './reducers';

const store = createStore(rootReducer);

接下来，我们需要在我们的组件中使用Redux store。我们可以通过以下代码来做到：

import { useDispatch } from 'react-redux';

const dispatch = useDispatch();

我们可以使用dispatch方法来触发Redux actions。例如，在ShoppingCart.js组件中，我们可以使用以下代码来将商品添加到购物车：

const handleAddToCart = (item) => {
  dispatch(addToCart(item));
};

网络请求

在我们的项目中，我们需要使用axios库来发送网络请求。我们可以通过以下代码来安装axios：

npm install axios

在我们的组件中，我们可以使用axios来发送网络请求。例如，在SearchComponent.js组件中，我们可以使用以下代码来搜索产品：

const handleSearch = (e) => {
  e.preventDefault();
  axios.get('/api/products/search', { params: { query } })
    .then((res) => {
      dispatch(searchProducts(res.data));
    })
    .catch((err) => {
      console.log(err);
    });
};