反 React 范式思考：设计一个符合范式的加载状态

通常，我们倾向于在 store 中定义加载状态，并使用一系列 action、transform 和 mutation 来管理它。然而，这会导致代码复杂性和维护困难。让我们探索一种反范式的方法，使用一个简单的组件来管理加载状态，从而简化我们的代码。

在 React 中，我们通常将加载状态存储在 Redux store 中。然而，这会导致代码复杂性，因为我们需要编写大量的样板代码来处理 action、transform 和 mutation。

本文提出了一种反范式的方法，使用一个简单的组件来管理加载状态。这种方法的优点是：

• 代码简化： 我们不再需要编写样板代码来处理 action、transform 和 mutation。
• 可维护性提高： 加载状态的管理集中在一个组件中，便于维护和理解。
• 可重用性： 我们可以将该组件重用于其他需要管理加载状态的组件中。

让我们来看看如何使用这个组件：

import React, { useState } from 'react';

const LoadingState = () => {
  const [isLoading, setIsLoading] = useState(false);

  const startLoading = () => {
    setIsLoading(true);
  };

  const stopLoading = () => {
    setIsLoading(false);
  };

  return (
    <div>
      {isLoading ? <div>Loading...</div> : <div>Content</div>}
    </div>
  );
};

export default LoadingState;

我们可以使用这个组件来管理任何组件的加载状态。例如，我们可以使用它来管理列表组件的加载状态：

import React from 'react';
import LoadingState from './LoadingState';

const List = () => {
  const [isLoading, setIsLoading] = useState(true);
  const [data, setData] = useState([]);

  useEffect(() => {
    fetch('https://example.com/data.json')
      .then(res => res.json())
      .then(data => {
        setData(data);
        setIsLoading(false);
      })
      .catch(error => {
        console.error(error);
        setIsLoading(false);
      });
  }, []);

  return (
    <div>
      <LoadingState isLoading={isLoading} />
      {data.map(item => <li key={item.id}>{item.name}</li>)}
    </div>
  );
};

export default List;

使用这个组件，我们可以轻松地管理列表组件的加载状态，而无需编写大量的样板代码。

总之，使用简单的组件来管理加载状态是一种反范式的方法，可以简化代码、提高维护性并提高可重用性。