Umi 的数据流最佳实践（2/2） - 全局的 hooks 数据流

2023-11-25 05:45:59

全局的 hooks 数据流

在上一节中，我们介绍了如何使用 Umi 的数据流机制来管理页面级的状态。在这一节中，我们将介绍如何使用 Umi 的数据流机制来管理全局状态。

全局状态的定义

全局状态是指在整个应用程序中都可以访问和修改的状态。全局状态通常用于存储一些应用程序级别的信息，例如用户登录状态、当前语言、主题设置等。

使用 Umi 创建全局状态

要使用 Umi 创建全局状态，我们需要创建一个新的模型文件。模型文件是一个 JavaScript 文件，它定义了全局状态的结构和行为。

// models/global.js
export default {
  namespace: 'global',
  state: {
    user: {
      id: 1,
      name: 'John Doe',
    },
    language: 'en',
    theme: 'light',
  },
  reducers: {
    setUser(state, { payload }) {
      return {
        ...state,
        user: payload,
      };
    },
    setLanguage(state, { payload }) {
      return {
        ...state,
        language: payload,
      };
    },
    setTheme(state, { payload }) {
      return {
        ...state,
        theme: payload,
      };
    },
  },
};

使用 hooks 访问和修改全局状态

我们可以在组件中使用 hooks 来访问和修改全局状态。

// components/Header.js
import { useGlobalState } from 'umi';

const Header = () => {
  const [globalState] = useGlobalState('global');

  return (
    <div>
      <h1>{globalState.user.name}</h1>
      <p>Language: {globalState.language}</p>
      <p>Theme: {globalState.theme}</p>
    </div>
  );
};

export default Header;