Shulou(Shulou.com)05/31 Report--

这篇文章主要介绍"怎么用redux实现computed计算属性"，在日常操作中，相信很多人在怎么用redux实现computed计算属性问题上存在疑惑，小编查阅了各式资料，整理出简单好用的操作方法，希望对大家解答"怎么用redux实现computed计算属性"的疑惑有所帮助!接下来，请跟着小编一起来学习吧!

前言

什么是computed计算属性？它会根据所依赖的数据动态显示新的计算结果, 该计算结果会被缓存起来。如果是Vue开发者，对这个功能并不陌生，而且很常用。对于React开发者，如果用过mobx，那其实也不陌生，一个装饰器就生效了????。那如果是Redux呢？？（沉默中。。。）有了，reselect嘛，哈哈????。啪，骗子，这是假的计算属性，它要手动提供全部依赖，每个依赖都是一个函数回调确定依赖值，每次写这么多代码是有多想敲坏我的机械键盘（嘶吼）。

这么说，redux和计算属性无缘？也不能这么说，办法总比困难多。虽然redux是单向数据流，无法做响应式操作，不过，我们可以创造出一个监听对象

import { Store } from 'redux';const collector = [];class ObjectDeps { protected readonly deps: string[]; protected readonly name: string; protected readonly store: Store; protected snapshot: any; constructor(store: Store, name: string, deps: string[] = []) { this.store = store; this.name = name; this.deps = deps; collector.push(this); } proxy(currentState) { if (state === null || typeof state != 'object') return state; const proxyData = Array.isArray(state) : [] : {}; const currentDeps = this.deps.slice(); const keys = Object.keys(currentState); for (let i = keys.length; i-- > 0; ) { const key = keys[i]!; Object.defineProperty(proxyData, key, { enumerable: true, get: () => { if (visited) { return new ObjectDeps( this.store, this.name, currentDeps.slice(), ).proxy(currentState)[key]; } visited = true; this.deps.push(key); return this.proxy((this.snapshot = currentState[key])); }, }); } }}

朴实无华，没有基于ES6的Proxy，因为兼容性不好。既然是前端的应用，自然是要照顾到ES5的环境的，因此选择defineProerty是个不错的方案。

有了监听驱动，那监听岂不是易如反掌？

// 假设user里的对象为：{ firstName: 'lady', lastName: 'gaga' }const userState = store.getState()['user'];function computedFullName() { const proxy = new ObjectDeps(store, 'user').proxy(userState); return proxy.firstName + '-' + proxy.lastName;}const fullname = computedFullName();

现在我们看看collector里收集到多少个依赖

console.log(collector); // [ ObjectDeps, ObjectDeps ]

不错，两条依赖，第一条的deps链为['user', 'firstName']，第二条为['user', 'lastName']。

原理分析：

每次创建proxy时，构造函数均会执行collector.push(this)向采集器加入自己。

proxy访问firstName时，其实访问的是getter，getter中有一条this.deps.push(key)立即收集依赖，并返回下一级的proxy值。以此类推，即使是proxy.a.b.c.d这种深度操作也来者不拒，因为每次访问下一级都能收集依赖并合并到deps数组中。

proxy访问lastName时，由于proxy实例其实已经被firstName占用了（通过visited变量判断），所以getter逻辑中会直接返回一个新的ObjectDeps实例，此时lastName已经和我们看到的proxy变量没有任何关系了。

自动收集依赖已经实现了，我们试一下如何缓存属性

class ObjectDeps { protected snapshot: any; proxy() {...} isDirty() { return this.snapshot !== this.getSnapshot(); } protected getSnapshot() { const deps = this.deps; let snapshot = this.store.getState(); for (let i = 0; i

< deps.length; ++i) { if (snapshot == null || typeof snapshot !== 'object') { break; } snapshot = snapshot[deps[i]!]; } return snapshot; }} 通过isDirty()的判断，即再次获得deps下的最新值和旧值做对比，便可以知道这个依赖是否为脏值。这一步便是缓存的关键。 现在你相信reselect是骗子了吧，明明可以自动依赖，非要多写几行代码增加心智负担？拜托，不是每个人都需要KPI压力的。 老师，我想直接在项目中使用上这个什么computed属性，应该去哪里找现成的呢？废话，当然是去山东找蓝翔。看看蓝翔大法： import { defineModel, useComputed } from 'foca';export const userModel = defineModel('user', { initialState: { firstName: 'lady', lastName: 'gaga', }, computed: { // 清爽 fullName() { return this.state.firstName + '-' + this.state.lastName; }, },});// App.tsxconst App: FC = () =>

{ const fullName = useComputed(userModel.fullName); return {fullName};}; At this point, the study of "how to implement computed attributes with redux" is over. I hope to solve everyone's doubts. Theory and practice can better match to help everyone learn, go and try it! If you want to continue learning more relevant knowledge, please continue to pay attention to the website, Xiaobian will continue to strive to bring more practical articles for everyone!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.