Автор оригинала: FreeCodeCamp Community Member.
Хранение всегда была неотъемлемой частью строительных приложений. Потрясая WebApp для нашей компании, мне нужен способ сохранить моих государств в хранилище, который был надежным, простым в использовании и настраиваемым на основе требований.
К счастью, эта библиотека была ответом на все мои проблемы!
Эта статья основана на проблеме, с которой я столкнулся во время работы над проектом. Давайте погрузиться глубоко и понять, как библиотека помогла мне решить ее.
Если вы еще не использовали redux-persist Затем прочитайте документы, так как они самозаявляются. Если вы хотите знать, почему вы должны использовать эту библиотеку, пройдите через это Статья – Это отличное введение Автор сам!
Проблема
Давайте возьмем пример, где я хотел сохранить редуктор в моей местной местности:
//Reducer
reducerA: {
engine: {
model: "F5AAA",
manufacturer: "Ferrari"
},
tyre: {
model: "T123",
manufacturer: "MRF",
owner: {
details: {
name: "Zack",
age: "26"
}
}
},
condition: "prime"
}//View
class TestComponent extends React.Component {
render() {
const model = someStateOfReducerA.tyre.model
const manufacturer = someStateOfReducerA.tyre.manufacturer
return (
{model}
{manufacturer}
)
}
}
//Reducer in localStorage
reducerA: {
engine: {
model: "F5AAA",
manufacturer: "Ferrari"
},
tyre: {
model: "T123",
manufacturer: "MRF",
owner: {
details: {
name: "Zack",
age: "26"
}
}
},
condition: "prime"
}Теперь этот редуктор сохранился на устройстве нашего клиента. Так что произойдет, если я представлю новый ключ к нашему Уменьшение ?
reducerA: {
engine: {
model: "F5AAA",
manufacturer: "Ferrari"
},
tyre: {
model: "T123",
manufacturer: "MRF",
owner: {
details: {
name: "Zack",
age: "26",
address: "CA" // NEW KEY ADDED
}
}
},
condition: "prime"
}Допустим, у нас есть вид, который оказывает значение нашего вновь введенного ключа:
//View with new key address
class TestComponent extends React.Component {
render() {
const model = someStateOfReducerA.tyre.model
const manufacturer = someStateOfReducerA.tyre.manufacturer
const address = someStateOfReducerA.tyre.owner.details.address
return (
{model}
{manufacturer}
{address}
)
}
}Когда я загружаю свое приложение с недавно введенным ключом, рендеринг нашего представления не удается. Это бросает ошибку, где она говорится:
Cannot render address of undefined
Это произошло, потому что хранение клиента находится в синхронизации с корневодителем инициализированным во время нашего приложения.
Несмотря на то, что мы представили новый ключ, хранилище клиента никогда не получало его. Он инициализирует наш корневодитель со старыми значениями в хранилище, где адрес никогда не существовал, а заставляет рендеринг нашего компонента потерпеть неудачу.
Решение
Это приводит к известной концепции: миграция базы данных.
LocalStorage на самом деле является небольшая база данных пар ключевых ценностей. Redux сохраняется делает это красиво. Если вы посмотрите на проект, инициализированный этой библиотекой, он уже использует Версия по умолчанию -1 Отказ Посмотрите ниже на скриншоте, сделанном с вкладки приложения в инструменте DEV Chrome.
Это действительно хорошо! Библиотека уже поддерживает для нас версию по умолчанию, чтобы мы могли включить функцию миграции в будущем.
Ключ состоит в том, чтобы настроить конфигурацию сохранения в вашем корзине.
export const persistConfig = {
key: 'testApp',
version: 0, //New version 0, default or previous version -1
storage,
debug: true,
stateReconciler: autoMergeLevel2,
migrate: createMigrate(migrations, { debug: true })
}Важно, чтобы мы обновили версию к 0, так что она переносит наше хранилище с -1 до 0.
Далее мы пишем миграцию, чтобы наш память знал, что есть обновление.
const migrations = {
0: (state) => {
return { ...
state,
tyre: { ...
state.tyre,
owner: { ...
state.tyre.owner,
details: {
state.tyre.owner.details,
address: "CA" //New Key added for migration
}
}
}
}
}
}миграции Затем используются в нашем конфиге «Персистем», упомянутые выше:
migrate: createMigrate(migrations, { debug: true })Таким образом, когда мы перезагружаем свое приложение, наше приложение проходит через фазу примирения, в котором хранение приведено в синхронизации с недавно обновленным редуктором.
Заключение
Настройка конфигурации всегда будет держать приложение обновленным на стороне клиента при выпуске новых версий. Очень важно, чтобы мы осторожны об этом при внесении офлайн первых приложений.
Это просто, как только вы понимаете основную концепцию и технику, чтобы сделать это. Я надеюсь, что эта статья помогла вам понять важность управления версиями ваших государств в хранилище:)
Следуйте за мной твиттер Чтобы получить больше обновлений в отношении новых статей и оставаться в курсе последних разработок Frontend. Также поделитесь этой статьей в Twitter, чтобы помочь другим знать об этом. Обмен – уход ^ _ ^.