Отдача не сохраняется при обновлении страницы

У меня есть некоторое состояние с отдачей React, но всякий раз, когда страница обновляется вручную, состояние отдачи сбрасывается.

Да нормальное поведение.

Это нормальное поведение, потому что я знаю, что другие библиотеки управления состоянием, такие как flux и react-redux, будут делать это.

Да, только часть библиотек управления состоянием сохраняет сами данные. Чаще можно найти внешние библиотеки, которые делают это, или пользовательские решения.

Лучше всего сохранить его в localStorage, чтобы он действительно сохранялся в браузере (поскольку localStorage также является асинхронным API, так что это определенно может вызвать некоторые проблемы).

Это зависит от ваших потребностей:

• Вы хотите предложить полный офлайн-опыт? Действуй
• вас беспокоят последствия для производительности в случае большого объема данных? Вы можете рассмотреть indexedDB
• вы просто пытаетесь сохранить некоторые токены аутентификации? Вероятно, sessionStorage может быть правильным решением
• сервер должен знать сохраненные данные? Вы можете выбрать файлы cookie

Допустим, не зная вашего варианта использования, сложно что-то предложить ????

Несмотря на то, что это довольно новая библиотека, есть ли способ сохранить состояние даже при обновлении страниц вручную?

Да, с помощью useRecoilTransactionObserver_UNSTABLE вы можете получать уведомления о каждом изменении Recoil и сохранении данных. . Затем с помощью RecoilRoot' initializeState вы сможете восстановить его. Как вы сказали, библиотека новая, и API могут быстро измениться в ближайшие месяцы ????

Это прекрасно работает, из документации здесь.

Любое изменение состояния заказа записывается в 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'),
  ],
})

Вы можете использовать библиотеку recoil-persist для сохранения состояния в localStorage.

Вот как вы можете его использовать:

import { recoilPersist } from 'recoil-persist'

const { persistAtom } = recoilPersist()

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