Recoil 不持久化状态，刷新页面时

Question

我有一些 React 后坐力状态，但是每当手动刷新页面时，后坐力状态都会重置。

这是正常行为吗，因为我知道其他状态管理库喜欢flux并且react-redux会这样做。

最好的做法是将其保存localStorage到实际保存在浏览器中（因为 localStorage 也是一个同步 api，所以这肯定也会导致一些问题。）

即使它是一个相当新的库，是否有某种方法即使在手动页面刷新时也能保持状态？

Answer 1

您可以使用recoil-persist库将状态保存到 localStorage。

下面是如何使用它：

import { recoilPersist } from 'recoil-persist'

const { persistAtom } = recoilPersist()

const counterState = atom({
  key: 'count',
  default: 0,
  effects_UNSTABLE: [persistAtom],
})

Answer 2

我有一些 React 后坐力状态，但是每当手动刷新页面时，后坐力状态都会重置。

是的，这是正常行为。

这是正常行为吗，因为我知道其他状态管理库，如flux 和react-redux 会这样做。

是的，只有状态管理库的一个子集自己保存数据。找到执行此操作的外部库或自定义解决方案更为常见。

将其保存到 localStorage 以实际将其保存在浏览器中是最佳实践吗（因为 localStorage 也是异步 API，因此这肯定也会导致一些问题。）

这取决于您的需求：

• 您想提供完整的离线体验吗？去吧
• 您是否担心在大量数据的情况下对性能的影响？你可以考虑indexedDB
• 您只是想保留一些身份验证令牌吗？可能sessionStorage是正确的解决方案
• 服务器是否需要知道存储的数据？你可以选择cookies

假设在不了解您的用例的情况下很难提出建议

即使它是一个相当新的库，是否有某种方法即使在手动页面刷新时也能保持状态？

是的，useRecoilTransactionObserver_UNSTABLE您可以收到每次 Recoil 更改和数据持久化的通知。然后，RecoilRoot' initializeState 你可以恢复它。正如您所说，该库是新的，API 可能会在接下来的几个月内迅速变化

Answer 3

从这里的文档来看，这效果很好。

对订单状态的任何更改都会写入 localStorage，并且 localStorage 中的值会在刷新时读入订单状态。

// define this function somewhere
const localStorageEffect = key => ({setSelf, onSet}) => {
  const savedValue = localStorage.getItem(key)
  if (savedValue != null) {
    setSelf(JSON.parse(savedValue))
  }
  onSet(newValue => {
    localStorage.setItem(key, JSON.stringify(newValue))
  })
}

// this is an example state atom
export const orderState = atom({
  key: 'orderState',
  default: {
    store: {}, // { id, name, phone, email, address }
    items: {}, // { [itemId]: { id, name, sizeTable, quantity, size } }
    contact: { deliveryOption: 'ship' }, // { name, email, phone, address, city, state, zipcode, promotions, deliveryOption }
  },
  // add these lines to your state atom, 
  // with the localStorage key you want to use
  effects_UNSTABLE: [
    localStorageEffect('order'),
  ],
})