青橙优购分类页面开发指南

分类页面开发

1. 创建分类分支

首先，在本地创建分类子分支：

git checkout -b cate

2. 渲染分类页面基本结构

在 src/components/CatePage.js 中定义页面结构：

import React, { useEffect } from "react";
import { useDispatch, useSelector } from "react-redux";

const CatePage = () => {
  const dispatch = useDispatch();
  const categories = useSelector((state) => state.cate.categories);

  useEffect(() => {
    dispatch(fetchCategories());
  }, [dispatch]);

  return (
    <div>
      <h1>分类页面</h1>
      <ul>
        {categories.map((category) => (
          <li key={category.id}>{category.name}</li>
        ))}
      </ul>
    </div>
  );
};

export default CatePage;

3. 获取分类数据

在 src/actions/cate.js 中定义数据获取操作：

import axios from "axios";

export const fetchCategories = () => async (dispatch) => {
  try {
    const response = await axios.get("/api/categories");
    dispatch({ type: "FETCH_CATEGORIES", payload: response.data });
  } catch (error) {
    console.error(error);
  }
};

4. 更新分类状态

在 src/reducers/cate.js 中定义分类状态更新：

const initialState = {
  categories: [],
};

export const cateReducer = (state = initialState, action) => {
  switch (action.type) {
    case "FETCH_CATEGORIES":
      return { ...state, categories: action.payload };
    default:
      return state;
  }
};

5. 样式和布局

在 src/styles/CatePage.css 中添加样式：

body {
  margin: 0;
  padding: 0;
}

h1 {
  text-align: center;
}

ul {
  list-style-type: none;
  padding: 0;
}

结论

通过遵循本指南，您已经创建了一个分类页面，它加载分类数据并以用户友好的方式显示它们。您可以根据需要进一步自定义样式和布局以满足您的特定需求。