Redux Selector

2018/05/13

Tags: redux selector

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

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

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

const s1 = (state) => {
    // 经过计算
    return state.user
}
const s2 = state => state.data

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

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

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

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

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

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

const s1_res = s1(state) // 从其他地方或者逻辑获取到这个值

const res = s3(s1_res, s2(state)) // 直接用来作为 s3 的输入

Comments