RTK 查询：访问反应组件之外的缓存数据答案

【问题标题】：RTK Query: Accessing cached data outside of a react componentRTK 查询：访问反应组件之外的缓存数据
【发布时间】：2021-11-01 14:33:05
【问题描述】：

我们正在将 RTK 查询集成到我们的应用中。

我们目前的“架构”如下：

所有业务逻辑操作都写在纯 JS 类的服务中。
这些服务是使用反应上下文传递的，以便组件树能够调用服务函数。

到目前为止，这些服务正在直接访问 redux 存储以执行适当的逻辑。

现在我们正在迁移到 RTK，从服务访问 RTK 缓存就不那么简单了：
据我所知，访问它的唯一方法是通过相关端点的select 函数。

关键是这个方法是一个“选择器工厂”，在反应组件之外使用它似乎不是正确的方法。

这是一个例子：

class TodoService {
   getTodoTitle( todoId: string ) {
     // This doesn't looks the right way to do it
     const todoSelector = api.endpoints.getTodo.select( {id: todoId } );
     const todo = todoSelector( state )
     return todo.data.title
   }
}

有什么方法可以安全的实现下面的代码

class TodoService {
   getTodoTitle( todoId: string ) {
      // Is there any way to do that kind of call ?
      const todoEntry = api.endpoints.getTodo.getCacheEntry( {id: todoId } );
      return todoEntry.data.title
   }
}

我想答案是否定的，我必须重构我们的整个架构，但在这样做之前，我想确定没有替代方法。

请注意，我可以自己构建缓存条目密钥，但这听起来也不是一种可靠的方法...

【问题讨论】：

标签： reactjs react-redux rtk-query rtk

【解决方案1】：

问题是您不想只获取缓存条目 - 选择器为您做的远不止这些。所以让我们继续说“请使用选择器”和“我们不会添加 另一种 这样做的方式”，因为选择器是你的代码应该始终与 Redux 交互的方式——无论是否反应。

如果您不是从需要稳定对象引用的 React 调用此代码，那么它就很好。选择器工厂将创建一个新的选择器，因此您会得到一个未记忆的结果。这并不完美，但如果你不依赖参照平等，它也完全没有坏处。

如果你想拥有引用相等性，你必须以某种方式存储选择器，可能作为类属性。

这样的事情是可能的：

class TodoService {
   getSelectorForTodo(todoId: string) {
     if (this._lastId !== todoId) 
       this._lastSelector = api.endpoints.getTodo.select( {id: todoId } )
     return this._lastSelector
   }

   getTodoTitle( todoId: string ) {
     const todo = this.getSelectorForTodo(todoId)(state)
     return todo.data.title
   }
}

【讨论】：