通过重新选择和对象理解选择器记忆

Question

redux 网站上有一篇关于使用 reselect lib 进行选择器记忆的文章，其中提供了下一个示例：

const state = {
  a: {
    first: 5
  },
  b: 10
}

const selectA = state => state.a
const selectB = state => state.b

const selectA1 = createSelector([selectA], a => a.first)

const selectResult = createSelector([selectA1, selectB], (a1, b) => {
  console.log('Output selector running')
  return a1 + b
})

const result = selectResult(state)
// Log: "Output selector running"
console.log(result)
// 15

const secondResult = selectResult(state)
// No log output
console.log(secondResult)
// 15

除了 selectA1 选择器之外，总体示例很清晰。 Redux 文档指出

当您调用选择器时，Reselect 将使用您提供的所有参数运行输入选择器，并查看返回的值。如果任何结果 === 与之前不同，它将重新运行输出选择器，并将这些结果作为参数传递。

因此，如果我们提供 state.a（即对象）作为 selectA1 的输入选择器，那么每次都会失败 === 检查并运行 a => a.first，对吧？还是我理解错了什么？

Answer 1

因此，如果我们提供

state.a

（对象）作为输入选择器

selectA1

，每次都会失败

===

检查并运行

a => a.first

， 对吗？

不，

selectA

选择器函数返回

state.a

，它是对值为

{ first: 5 }

的对象的引用。

state.a

将继续 always 成为对 this 对象的引用，直到分派操作来更新

state.a

，然后成为对具有值的 new 对象的引用，然后

selectA1

选择器函数将重新计算其输出值。对象引用将始终严格等于其自身。

我希望这个片段有助于解释对象引用相等性。

const state = {
  a: { first: 5 },
};

const selectA = state => state.a;

// same reference, true
console.log(selectA(state) === state.a);

// same "value", but false because different reference
console.log({ first: 5 } === state.a);