关于 React JS 状态管理的一般建议（Ionic、Capacitor 与其他...）

Question

大家晚上好！

我使用 React JS、ionic 框架和电容器重写了之前作为 PWA（以及 Google Play 上的 TWA）发布的现有项目。

我现有的项目只需要一个条目（作为对象），我已将其存储在 localStorage 中。

对于我的新版本，我想使用与离子/存储或电容器更内联的东西。我找到的几乎所有信息都是关于 Angular 的。即使我找到的 React JS 是如何存储待办事项数组等。我只需要创建和修改单个对象，并且没有找到 React 和 ionic/storage 的相关起点。

Zustand、Redux 和类似的插件对我来说似乎有点矫枉过正，但我绝对可能是错的。

有人能指出我正确的方向吗？

谢谢，祝你一切顺利！ 佩里

Answer 1

不看具体例子很难说。 但看起来 React 的 useReducer 钩子就足够了。

如何使用的示例：

import { useReducer } from 'react';

function reducer(state, action) {
  if (action.type === 'incremented_age') {
    return {
      age: state.age + 1
    };
  }
  throw Error('Unknown action.');
}

function MyComponent() {
  const [state, dispatch] = useReducer(reducer, { age: 42 });


  return (
    <>
      <button onClick={() => {
        dispatch({ type: 'incremented_age' })
      }}>
        Increment age
      </button>
      <p>Hello! You are {state.age}.</p>
    </>
  );
}

您可以拥有更多的减速器来改变状态的不同部分。 将其与模式和上下文相结合，您可以创建一个足以满足中小型应用程序的状态管理系统。