wd and cc

-- Good good study, day day up!

Redux Selector

#Redux #Selector

redux 应用可以通过 selector 来做 state -> props 的映射工作。selector 本身有缓存效果,所以可以一定意义上加速。我用的是这个 https://github.com/reduxjs/reselect

selector 主要是一个纯函数,给同样的输入,得到同样的输出,只处理数据,没有其他附加影响。这样就可以缓存中间结果了。

新建 selector 有两个方法,一个是直接定义函数,例如

1const s1 = (state) => {
2    // 经过计算
3    return state.user
4}
5const s2 = state => state.data

另外一个方法是通过 createSelector 函数来创建,例如

1const s3 = createSelector(s1, s2, (s1, s2) =>{
2    // 经过计算
3    return xx
4})

实际上 selector 都是一些函数,具体用的是侯会执行这些函数,第一个方法创建的还好理解,第二个方法里面,会传什么参数呢?输入是什么呢?

实际上,第二个方法定义的 selector 执行的时候类似这样。

1const res = s3(s1(state), s2(state))

输入是里面 selector 的输入,然后不停嵌套到最初的数据。这样一个 selector 使用的方法就广泛了。比如

1const s1_res = s1(state) // 从其他地方或者逻辑获取到这个值
2
3const res = s3(s1_res, s2(state)) // 直接用来作为 s3 的输入
comments powered by Disqus