React 使用 Recoil 和 LocalStorage 实现状态持久化

乐闻

2024年04月21日 07:33· 阅读 852

前言

实现Recoil状态与 LocalStorage的无缝集成，而不在业务组件中直接操作，我们可以使用Recoil的高阶工具——effect。Effect允许我们在atom的配置中直接定义与外部资源的交互，从而将持久化逻辑与业务组件解耦。

下面是如何创建自动同步到 LocalStorage的Recoil atom的步骤。

实现步骤

一、创建Recoil状态(atom)并添加effect

首先，我们创建一个Recoil atom并在其中加入一个effect，用于处理与 LocalStorage的同步。

javascript
import { atom } from 'recoil';

// 定义LocalStorage的键名
const localStorageKey = 'myRecoilState';

// 自定义effect函数
const localStorageEffect = (key) => ({setSelf, onSet}) => {
  // 在初始化时，从LocalStorage加载并设置Recoil状态
  const savedValue = localStorage.getItem(key);
  if (savedValue != null) {
    setSelf(JSON.parse(savedValue));
  }

  // 监听Recoil状态的变化，将新状态保存到LocalStorage
  onSet(newValue => {
    localStorage.setItem(key, JSON.stringify(newValue));
  });
};

// 创建带有LocalStorage effect的Recoil atom
export const exampleState = atom({
  key: 'exampleState',
  default: '', // 默认状态
  effects: [
    localStorageEffect(localStorageKey),
  ],
});

在这个配置中，我们定义了一个 localStorageEffect函数，它在atom被初始加载时尝试从 LocalStorage读取值并设置为当前状态，同时监听状态的变化来更新 LocalStorage的值。

二、使用带有LocalStorage effect的Recoil atom

在业务组件中，你可以像使用任何其他Recoil atom一样使用 exampleState，而无需担心状态的持久化。

javascript
import { useRecoilState } from 'recoil';
import { exampleState } from './yourRecoilAtoms';

function MyComponent() {
  const [state, setState] = useRecoilState(exampleState);

  // 业务逻辑，例如状态更新
  const updateState = (newValue) => {
    setState(newValue);
  };

  return (
    <div>
      <input
        type="text"
        value={state}
        onChange={(e) => updateState(e.target.value)}
      />
    </div>
  );
}

你的组件 MyComponent不需要关心状态的持久化，所有的持久化逻辑都封装在atom的effect中。

三、在应用中添加RecoilRoot

别忘了在你的应用根组件中包装 RecoilRoot。

javascript
import { RecoilRoot } from 'recoil';
import MyComponent from './MyComponent';

function App() {
  return (
    <RecoilRoot>
      <MyComponent />
    </RecoilRoot>
  );
}

现在，你的状态会自动同步到 LocalStorage并在应用加载时自动恢复，而且你的业务组件保持清晰和专注于业务逻辑。

总结

通过在Recoil atom中使用effect，我们将状态的持久化逻辑从业务组件中分离出来，使得业务组件更加纯粹，易于维护，而状态的持久化变得更加透明和自动化。这样，我们在开发中便可以专注于用户界面和业务逻辑的实现，而无需担心状态的持久化细节。

effects是在Recoil atom的配置中使用的，用于添加副作用逻辑，比如同步状态到 LocalStorage。这些副作用能够在atom的生命周期事件发生时执行，例如当atom的值被读取或设置时。

标签：

React Recoil