0

来自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 时似乎不太可能不考虑这一点，我很好奇我在这里错过了什么？

4

1 回答 1

0

您可以使用useRecoilCallback钩子，它基本上提供了类似的东西，但不是作为中间件。由于 recoil 没有严格意义上的全局内聚状态，因此没有真正的中间件。将其视为类似于 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

于 2021-02-25T09:28:40.503 回答