Добавьте кешет в автономном режиме в свой REACT Reducer с 5 строками кода

При создании веб -приложений я часто использую этот метод для добавления локального кэширования хранения моего штата.

Предположим, мы начинаем с:

const [state, dispatch] = React.useReducer(
  reducer,
  initialState
)

В качестве первого шага мы создаем метод, который принимает редуктор и выводит еще один, функция высшего порядка:

const withLocalStorageCache = reducer => { return (state, action) => {
  const newState = reducer(state, action);
  localStorage.setItem("my-state", JSON.stringify(newState));
  return newState;
}};

и мы завершаем наш редуктор, прежде чем передавать результат userEducer крюк.

const [state, dispatch] = React.useReducer(
  withCache(reducer),
  initialState
)

И, наконец, мы заменяем начальную статус последней кэшированной версией:

const [state, dispatch] = React.useReducer(
  withCache(reducer),
  localStorage.getItem("my-state")
)

Вот и все !

Одна строка модифицированных кодов и 5 новых, и все наше состояние синхронизируется с LocalStorage.

Мы, конечно, можем ограничить наше кэширование только определенными частями состояния, а не всем объектом состояния. И ограничить наши обновления кешем действием или состоянием. Но мы оставим это в качестве упражнения для пользователя.

LocalStorage поддерживается 97,62% браузеров.

Полная демонстрация

Оригинал: “https://dev.to/rakannimer/add-offline-caching-to-your-react-reducer-with-5-lines-of-code-470n”