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

Question

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

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

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

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

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

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

举个例子：

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
   }
}

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

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

Answer 1

问题是您不想只获取缓存条目 - 选择器为您做的远不止于此。因此，让我们继续“请使用选择器”和“我们不会添加 另一种 方法”，因为选择器是您的代码应始终与 Redux 交互的方式 - React与否。

如果您不是从需要稳定对象引用的 React 调用此代码，那么它就很好。选择器工厂将创建一个新的选择器，因此您会得到一个未记忆的结果。这并不完美，但如果您不依赖于引用平等，它也不会造成任何伤害。

如果你想要引用相等，你必须以某种方式存储选择器，可能是 class 属性.

这样的事情是可能的：

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
   }
}

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

RTK Query: Accessing cached data outside of a react component

reactjs

react-redux

rtk

rtk-query