刷新页面时后坐力未持久

如何解决刷新页面时后坐力未持久

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

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

将它保存到localStorage中以使其在浏览器中持久保存是否是最佳实践（因为localStorage也是一个同步api，因此肯定会引起一些问题。）

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

解决方法

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

是的，这是正常行为。

这是正常现象，因为我知道其他状态管理库（例如flux和react-redux）会这样做。

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

将其保存到localStorage中以使其在浏览器中持久保存是否是最佳实践（因为localStorage也是异步API，因此肯定还会引起一些问题。）

这取决于您的需求：

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

让我们说，在不了解用例的情况下，很难提出建议?

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

是的，使用useRecoilTransactionObserver_UNSTABLE，您可以收到有关Recoil每次更改的通知并保留数据。然后，使用RecoilRoot' initializeState 可以还原它。正如您所说，该库是新库，API在接下来的几个月中可能会迅速变化。

从文档here开始，效果很好。

对订单状态的任何更改都会写入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,sizeTable,quantity,size } }
    contact: { deliveryOption: 'ship' },// { name,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'),],})

您可以使用 recoil-persist 库将状态持久化到 localStorage。

这里你可以如何使用它：

ProductView