用 React 处理页面中所有状态的最佳方法是什么？答案

【问题标题】：Is it best way to handle all state in page with React用 React 处理页面中所有状态的最佳方法是什么？
【发布时间】：2021-10-20 09:21:52
【问题描述】：

我曾经使用 Elm 语言。它应该在页面上有一个状态（如正常、加载、错误）我可以像这样用榆树语言写作

type Action = Choose | Edit | Confirm

type ModalType = Address | Payment | Tax

type State
   = Normal
   | PopupModal ModalType Action
   | Error String


// and use like this
Normal (normal state)
PopupModal Address Choose (Popupmodal state)
Error "something went wrong" (Error state)

意思是如果你想使用 PopupModal 状态，你应该发送 Action 和 ModalType 作为参数。或者如果你想正常状态，你什么都不发送。

所以，我想在 React 中使用这个概念。它有 2 种状态（正常和弹出模式）并且“弹出模式”状态有 3 种状态（选择、编辑、确认）

这是在 React 中使用这个概念的最佳方式吗？如果最好，我该如何在 React 中编写它？

现在，我是这样写的

const ACTION = Object.freeze({
  CHOOSE: "CHOOSE",
  EDIT: "EDIT",
  CONFIRM: "CONFIRM",
});

const MODAL_TYPE = Object.freeze({
  ADDRESS: "ADDRESS",
  PAYMENT: "PAYMENT",
  TAX: "TAX",
});

const STATE = Object.freeze({
  NORMAL: "NORMAL",
  MODAL: (type, action) => {
    switch (type) {
      case MODAL_TYPE.ADDRESS:
        return <Address action={action} />
      case MODAL_TYPE.PAYMENT:
        return <Payment action={action} />
      case MODAL_TYPE.TAX:
        return <Tax action={action} />
      default:
        break;
    }
  },
});

const render = (state) => (type, action) => {
  switch (state) {
    case STATE.NORMAL:
      return <Normal />;
    case STATE.MODAL:
      return state(type, action);
    default:
      break;
  }
};

// Normal state
render(STATE.NORMAL)()

// Popup modal state
render(STATE.MODAL)(MODAL_TYPE.PAYMENT, ACTION.CHOOSE)
render(STATE.MODAL)(MODAL_TYPE.TAX, ACTION.CHOOSE)

【问题讨论】：

请不要征求意见。而是指定“最佳”的确切含义。

标签： javascript reactjs elm

【解决方案1】：

有一些选择：

a) 使用 typescript 接口，该接口在 useState 挂钩中准确保存输入数据。

export enum UserStatus {
  LOADING = "loading",
  SUCCESS = "success",
  ERROR = "error",
}

  const [selectedCategories, setSelectedCategories] = useState<States>([]);

b) 在阅读了你的帖子之后——variants 的识别——在这种情况下应该是可靠的

c) 准备通用 Modal 组件 - 它包含一些通用属性（标题、描述） - 带有设置变量 - 并基于该设置根据该变量呈现案例：

  {props.setVar == 'address' && <Address />}
  {props.setVar == 'payment' && <Payment />}
  {props.setVar == 'tax' && <Tax />}

【讨论】：