Recoil：将长期存在的客户端对象传递给选择器

如何解决Recoil：将长期存在的客户端对象传递给选择器

来自 react-redux / redux-thunk，有一种很好的方法可以将客户端对象实例化一次，将其传递给 ThunkMiddleware，然后在 thunk 中检索它：


// This is the instance I want during async calls
const myapiclient = new Myapiclient();

const store = createStore(
    reducer,applyMiddleware(thunk.withExtraArgument(myapiclient))
);

然后在我的 thunk 定义中：

const fetchSomething = (id) => {
    return (dispatch,getState,myapiclient) => {
        // It's the same instance!
        return myapiclient.fetchSomething(id)
                .then((res) ....);
    }
}

在 Recoil 中，我看不到类似的方法：据我所知，文档中的示例假设原子/选择器的主体可以在没有任何外部实例化上下文的情况下执行。

因为在设计 Recoil 时这似乎不太可能不是一个考虑因素，所以我很好奇我在这里遗漏了什么？

解决方法

您可以使用 useRecoilCallback 钩子，它基本上提供了类似的功能，但不是作为中间件。由于 recoil 没有严格意义上的全局内聚状态，所以没有真正的中间件。将其视为类似于 react 的组件树，但用于状态原子。您可以通过选择器连接它们，并通过 React 组件查询和设置它们，但反冲本身并不真正了解所有原子（如果您愿意，您甚至可以在运行时创建原子）。

那么你会怎么做是这样的：

const myApiClient = new MyApiClient();

// Can also be returned by a hook.
const thunkWithExtraArgument = useRecoilCallback(({snapshot,set}) => async (myApiClient) => {
  const res = myApiClient.fetchSomething(id);

  set(atom,res.json());
},[]);

// ... Somewhere else in a component

thunkWithExtraArgument(myApiClient);

对于反冲回调钩子，请查看：https://recoiljs.org/docs/api-reference/core/useRecoilCallback