在 Redux 中，我们可以使用 redux-persist 来将 Redux 的 state 持久化到本地存储中。但是如果我们需要将 Redux 的 state 缓存到内存中，以提高应用程序的性能，该怎么办呢？这时就可以使用 npm 包 redux-yasdic-cache。
安装
通过 npm 安装：
npm install redux-yasdic-cache
如何使用
创建 cache 对象
在初始化应用程序时，需要创建一个 cache 对象并传递到 createStore() 方法中。cache 对象包含操作内存缓存的方法，如 get(), set(), update(), remove() 等。
import { createStore } from 'redux';
import { createCache } from 'redux-yasdic-cache';
import rootReducer from './reducers';
const cache = createCache();
const store = createStore(rootReducer, cache);创建 cache 对象时，可以传递一个可选的参数来配置缓存的大小和过期时间（以秒为单位）：
const cacheOptions = {
maxSize: 100, // 最大缓存数量
maxAge: 60, // 缓存过期时间（单位：秒）
};
const cache = createCache(cacheOptions);使用缓存
在使用 Redux 的 dispatch() 方法更新 state 前，可以在 cache 对象中先查找是否存在缓存。如果存在，可以直接返回缓存中的 state，从而减少不必要的 Redux 计算。
-- -------------------- ---- -------
------ - ----------- - ---- --------------
----- ------------- - -- -- -
----- ----- - ----------------- -- -------------
----- ---- - ----------------- -- ------------
-- ------ -----
----- ---------- - --------------------
-- ------------ -
------ -
-----
---------- ----------
-------------------------------- ----- ---------
------
--
-
-- - --- -- ----- --
----- ------------ - ----- -- -- -
----- -------- - ----- --------------------------------
----- ---- - ----- ----------------
-- -- --- ------ ----- ----
------------------- ------
-- -- ----- -- -----
---------- ----- -------------- -------- ---- ---
--
------ -
-----
--------------
-------------------------- ----- ---------
------- ---------------------------- --- -------------
------
--
--当有新的 state 数据被更新后，也可以将其存入缓存：
const updateData = newData => {
// 将最新的 state 数据存入缓存
cache.set('myData', newData);
// 更新 Redux 中的 state
dispatch({ type: 'UPDATE_DATA', payload: newData });
};清空缓存
当 state 数据被更新或不再需要缓存时，可以清空缓存：
const clearCache = () => {
cache.clear();
};示例代码
以下是一个完整的示例，展示了如何使用 redux-yasdic-cache 和 Redux 来管理 state 数据：
-- -------------------- ---- -------
------ ----- ---- --------
------ - ----------- - ---- --------
------ - --------- ------------ ----------- - ---- --------------
------ - ----------- - ---- ---------------------
------ ----------- ---- -------------
----- ----- - ------------- -------- --- ------- -- ---
----- ----- - ------------------------ -------
----- --- - -- -- -
----- -------- - --------------
----- ----- - ----------------- -- -------------
----- ---- - ----------------- -- ------------
----- ------------ - ----- -- -- -
----- -------- - ----- --------------------------------
----- ------- - ----- ----------------
-- ---- ----- ------
------------------- ---------
-- -- ----- -- -----
---------- ----- -------------- -------- ------- ---
--
------ -
-----
--------------
-------------------------- ----- ---------
------- ---------------------------- --- -------------
------
--
--
----- ----------- - --------------------------------
----------------
--------- --------------
---- --
------------
-----------
--总结
使用 redux-yasdic-cache 可以将 Redux 的 state 缓存到内存中，提高应用程序的性能。创建 cache 对象并在 dispatch() 方法之前先从缓存中获取 state，能够避免不必要的 Redux 计算。同时，通过在合适的时机将最新的 state 数据存入缓存，也能够避免频繁地从 API 获取数据。要注意，缓存的大小和过期时间应该根据具体情况来选择合适的值。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6006700ee361a36e0bce8cf5