#javascript #reactjs #recoiljs
#javascript #reactjs #recoiljs
Вопрос:
У меня есть некоторое состояние с реакцией отдачи, но всякий раз, когда страница обновляется вручную, состояние отдачи сбрасывается.
Это нормальное поведение, потому что я знаю другие библиотеки управления состоянием, такие как flux
и react-redux
будут делать это.
Лучше ли сохранять его в localStora&e
, чтобы оно действительно сохранялось в браузере (поскольку localStora&e также является синхронным API, так что это определенно также может вызвать некоторые проблемы.)
Несмотря на то, что это довольно новая библиотека, есть ли какой-нибудь способ сохранить состояние даже при обновлении страницы вручную?
Комментарии:
1. Flux и Redux не сохраняются из коробки. Если вы хотите сохранить свое состояние в браузере, вы можете использовать localStora&e / sessionStora&e или IndexedDB (асинхронный).
Ответ №1:
У меня есть некоторое состояние с реакцией отдачи, но всякий раз, когда страница обновляется вручную, состояние отдачи сбрасывается.
Да, это нормальное поведение.
Это нормальное поведение, потому что я знаю, что другие библиотеки управления состоянием, такие как flux и react-redux, будут делать это.
Да, только подмножество библиотек управления состоянием сохраняет сами данные. Чаще всего можно найти внешние библиотеки, которые это делают, или пользовательские решения.
Лучше ли сохранять его в localStora&e, чтобы оно действительно сохранялось в браузере (поскольку localStora&e также является асинхронным API, так что это определенно также может вызвать некоторые проблемы.)
Это зависит от ваших потребностей:
- вы хотите предложить полноценный автономный интерфейс? Дерзайте
- вас беспокоят последствия для производительности в случае большого объема данных? Вы могли бы рассмотреть
indexedDB
- вы просто пытаетесь сохранить некоторые токены аутентификации? Вероятно,
sessionStora&e
могло бы быть правильным решением - нужно ли серверу знать сохраненные данные? Вы могли бы выбрать файлы cookie
Допустим, что, не зная вашего варианта использования, трудно что-то предложить 😉
Несмотря на то, что это довольно новая библиотека, есть ли какой-нибудь способ сохранить состояние даже при обновлении страницы вручную?
Да, с useRecoilTransactionObserver_UNSTABLE
вы могли бы получать уведомления о каждом изменении отдачи и сохранении данных. Затем с помощью RecoilRoot' initializeState
вы могли бы восстановить его. Как вы сказали, библиотека новая, и API-интерфейсы могут быстро измениться в ближайшие месяцы 😉
Ответ №2:
Вы могли бы использовать библиотеку recoil-persist для сохранения состояния в localStora&e.
Вот как вы могли бы это использовать:
import { recoilPersist } from 'recoil-persist'
const { persistAtom } = recoilPersist()
const counterState = atom({
key: 'count',
default: 0,
effects_UNSTABLE: [persistAtom],
})
Ответ №3:
Это прекрасно работает, из документов здесь.
Любое изменение состояния заказа записывается в localStora&e, а значение из localStora&e считывается в состояние заказа при обновлении.
// define this function somewhere
const localStora&eEffect = key =&&t; ({setSelf, onSet}) =&&t; {
const savedValue = localStora&e.&etItem(key)
if (savedValue != null) {
setSelf(JSON.parse(savedValue))
}
onSet(newValue =&&t; {
localStora&e.setItem(key, JSON.strin&ify(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 localStora&e key you want to use
effects_UNSTABLE: [
localStora&eEffect('order'),
],
})
Комментарии:
1. Это приятно, спасибо. Меня беспокоит только
localStora&e
поведениеsynchrnous
. Не будет ли это несовместимо с отдачей?2. И почему бы не сохранить пустые значения внутри вашего состояния по умолчанию?
store: {id: 0, name: "" ...}
3. Это сработало действительно великолепно. У меня возникли проблемы с обновлением Recoil, поэтому, используя yarn, удалил и переустановил. Вам действительно нужно быть в курсе событий, чтобы использовать это в данный момент. Побочные эффекты очень новы.