React-Hooks + Redux 实战：打造你的米游社应用

2024-01-22 14:45:48

当你踏入提瓦特的奇妙世界，米游社社区就如同一盏明灯，指引着你探索这片未知的领域。在本文中，我们将踏上激动人心的旅程，使用 React-Hooks 和 Redux，从无到有地构建属于你自己的米游社应用程序。

初探数据宝藏

我们的冒险从获取数据开始。米游社社区隐藏着一座宝库，里面蕴藏着丰富的用户信息、游戏进度和论坛帖子。我们将利用 Axios 库，一个轻量级 HTTP 客户端，来敲开这扇宝库的大门。

import axios from "axios";

const getData = async () => {
  const response = await axios.get("https://api.mihoyo.com/v1/userinfo");
  return response.data;
};

巧用 Redux，管理状态

现在，我们有了宝贵的米游社数据。但如何有效地管理这些数据，并在应用程序中合理地使用它们？这就是 Redux 登场的时候了。Redux 是一个状态管理工具包，允许我们在应用程序中集中存储和管理共享状态。

我们将创建一个 Redux store，并使用 useDispatch 和 useSelector hook 来与它进行交互。

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

const store = createStore(reducer);

const Component = () => {
  const dispatch = useDispatch();
  const data = useSelector((state) => state.data);
  return <div>{data}</div>;
};

勾勒页面蓝图

数据准备妥当，是时候构建我们应用程序的界面了。我们将使用 React-Hooks，一个现代 React 特性，它允许我们使用状态和生命周期方法，而无需使用类组件。

import React, { useState } from "react";

const Header = () => {
  const [isOpen, setIsOpen] = useState(false);
  return (
    <div>
      <button onClick={() => setIsOpen(true)}>Menu</button>
      <nav>
        {isOpen && <ul><li>Link 1</li><li>Link 2</li></ul>}
      </nav>
    </div>
  );
};

装点细节，锦上添花

我们的应用程序雏形已成，但它还缺乏一些精美的细节。我们加入了吸顶、预览和搜索功能，让用户体验更加丰富。

吸顶

import { useEffect, useRef } from "react";

const Sticky = ({ children }) => {
  const ref = useRef(null);
  useEffect(() => {
    const element = ref.current;
    const handleScroll = () => {
      element.classList.toggle("sticky", window.scrollY > 0);
    };
    window.addEventListener("scroll", handleScroll);
    return () => {
      window.removeEventListener("scroll", handleScroll);
    };
  }, []);

  return <div ref={ref}>{children}</div>;
};

预览

import React, { useState } from "react";

const Preview = ({ children }) => {
  const [isOpen, setIsOpen] = useState(false);
  return (
    <div>
      <button onClick={() => setIsOpen(true)}>Preview</button>
      <div>
        {isOpen && <div>{children}</div>}
      </div>
    </div>
  );
};

搜索

import React, { useState } from "react";

const Search = () => {
  const [query, setQuery] = useState("");
  return (
    <div>
      <input value={query} onChange={(e) => setQuery(e.target.value)} />
      <button>Search</button>
    </div>
  );
};