刷新页面时，重新记录未持续状态

Question

我有一些React反冲的状态，但无论何时手动刷新页面，反冲状态都会重置。

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

将其保存到localStorage中以实际将其持久化在浏览器中是最佳做法吗(因为localStorage也是一个同步api，所以这肯定也会导致一些问题。)

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

Answer 1

我有一些React反冲的状态，但无论何时手动刷新页面，反冲状态都会重置。

是的，这是正常行为。

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

是的，只有状态管理库的一个子集保存数据本身。更常见的是，可以找到这样做的外部库或自定义解决方案。

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

这取决于您的需求：

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

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

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

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

Answer 2

您可以使用反冲持久化库将状态持久化到localStorage。

以下是如何使用它：

import { recoilPersist } from 'recoil-persist'
const { persistAtom } = recoilPersist()
const counterState = atom({
key: 'count',
default: 0,
effects_UNSTABLE: [persistAtom],
})

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'),
],
})