Caching Offline ke React Reducer

Saat membuat aplikasi web menggunakan metode ini untuk menambahkan cache penyimpanan lokal.

Misalkan kita mulai dengan:

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

sebagai langkah pertama kita membuat metode yang mengambil reducer dan keluaran yang lain

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

dan kita membungkus reducer kita dengan itu sebelum meneruskan hasilnya ke hook useReducer  .

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

Dan akhirnya kami mengganti initialState dengan versi cache terbaru:

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

Satu baris kode diubah dan 5 baris baru dan seluruh negara disinkronkan dengan localStorage.

Kita dapat membatasi caching kita hanya pada bagian-bagian tertentu dari negara alih-alih keseluruhan objek negara. Dan batasi pembaruan pada cache dengan tindakan atau status. Tapi kami akan meninggalkan itu sebagai latihan untuk pengguna.