简介
redux-promise-memo 是一个基于 Promise 的 redux 状态管理工具，它可以帮助开发者优化的 redux store 状态变化的性能。我们知道一个状态管理的工具，他的性能考虑也非常重要。redux-promise-memo 可以实现store 记忆功能，避免重复的渲染，提高用户体验。
安装
你可以使用 npm 进行安装。
npm install redux-promise-memo
开始使用
在项目中引入 redux-promise-memo 包
import memo from 'redux-promise-memo';
import { createStore, combineReducers } from 'redux';
const rootReducer = combineReducers({});
const store = createStore(rootReducer, memo);memo 函数将会根据每一次 action 的 type 和 payload，缓存 store 计算得到的结果，当下一次 action 的 type 和 payload 相同时，会直接返回缓存中的结果，而不会再次执行计算得到结果。
使用示例
我们假设我们有这样一个场景：当用户搜索时，返回一个关于搜索词的商品列表，当用户重新搜索时，需要避免重复的计算。我们可以使用 redux-promise-memo 解决这个问题。
假设我们有一个搜索的 reducer。
-- -------------------- ---- -------
------ - --------------- - ---- -------------
----- --------- - - --------- --- -------- ----- --
------ ----- ------------- - ------ - ---------- ------- -- -
------ ------------- -
---- ----------------
-- -- -------------- -----
-- ---
------ - --------- ------------- -------- ----- --
--------
------ ------
-
--以上 redux reducer 实现了当搜索时的 product state 更新。在产品代码中，我们可以使用 redux-promise-memo 优化这个过程。
import memo from 'redux-promise-memo';
import { createStore, combineReducers } from 'redux';
import { searchReducer } from './reducers/search';
const rootReducer = combineReducers({ search: searchReducer });
const store = createStore(rootReducer, memo);在上面的代码 snippet 中，我们为 store 传递了 memo 函数，memo 中 cache 会缓存上一次 reducer handler 执行的结果，如果当前的 state 中没有任何更改，store 将直接返回缓存中的结果，而无需重新计算状态。
结尾
记得使用 redux-promise-memo，可以避免重复的计算，提高渲染性能，更好的为用户提供良好的用户体验。
希望这篇文章对你有所帮助，如果你有不懂的地方或者有其他的想法，欢迎在评论区留言。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60065f7f238a385564ab6aed