如何解决如何使用 Recoil 在 React 组件之外操作全局状态?
我正在使用 Recoil,我想从实用程序函数内部访问组件外部的存储(获取/设置)。
更一般地说,人们如何编写可重用的函数来操纵 Recoil 的全局状态?使用 Redux,我们可以直接将事件分派到 store,但我还没有找到 Recoil 的替代方案。
使用钩子是一种很棒的开发者体验,但很难将组件内定义的函数转换为外部实用程序函数,因为钩子只能在组件内使用。
解决方法
我设法调整了 https://github.com/facebookexperimental/Recoil/issues/289#issuecomment-777249693 答案并使其适用于 Next.js 框架。 (见下面的使用示例)
此解决方法允许将 Recoil Root 用作一种全局状态。不过,它只有在只有一个 RecoilRoot
组件时才有效。
// RecoilExternalStatePortal.tsx
import {
Loadable,RecoilState,RecoilValue,useRecoilCallback,useRecoilTransactionObserver_UNSTABLE,} from 'recoil';
/**
* Returns a Recoil state value,from anywhere in the app.
*
* Can be used outside of the React tree (outside a React component),such as in utility scripts,etc.
* <RecoilExternalStatePortal> must have been previously loaded in the React tree,or it won't work.
* Initialized as a dummy function "() => null",it's reference is updated to a proper Recoil state mutator when RecoilExternalStatePortal is loaded.
*
* @example const lastCreatedUser = getRecoilExternalLoadable(lastCreatedUserState);
*/
export let getRecoilExternalLoadable: <T>(
recoilValue: RecoilValue<T>,) => Loadable<T> = () => null as any;
/**
* Sets a Recoil state value,etc.
*
* <RecoilExternalStatePortal> must have been previously loaded in the React tree,it's reference is updated to a proper Recoil state mutator when RecoilExternalStatePortal is loaded.
*
* @example setRecoilExternalState(lastCreatedUserState,newUser)
*/
export let setRecoilExternalState: <T>(
recoilState: RecoilState<T>,valOrUpdater: ((currVal: T) => T) | T,) => void = () => null as any;
/**
* Utility component allowing to use the Recoil state outside of a React component.
*
* It must be loaded in the _app file,inside the <RecoilRoot> component.
* Once it's been loaded in the React tree,it allows using setRecoilExternalState and getRecoilExternalLoadable from anywhere in the app.
*
* @see https://github.com/facebookexperimental/Recoil/issues/289#issuecomment-777300212
* @see https://github.com/facebookexperimental/Recoil/issues/289#issuecomment-777305884
* @see https://recoiljs.org/docs/api-reference/core/Loadable/
*/
export function RecoilExternalStatePortal() {
// We need to update the getRecoilExternalLoadable every time there's a new snapshot
// Otherwise we will load old values from when the component was mounted
useRecoilTransactionObserver_UNSTABLE(({ snapshot }) => {
getRecoilExternalLoadable = snapshot.getLoadable;
});
// We only need to assign setRecoilExternalState once because it's not temporally dependent like "get" is
useRecoilCallback(({ set }) => {
setRecoilExternalState = set;
return async () => {
};
})();
return <></>;
}
使用 Next.js 框架的配置示例:
// pages/_app.tsx
import {
NextComponentType,NextPageContext,} from 'next';
import { Router } from 'next/router';
import React from 'react';
import { RecoilRoot } from 'recoil';
import { RecoilExternalStatePortal } from '../components/RecoilExternalStatePortal';
type Props = {
Component: NextComponentType<NextPageContext>; // Page component,not provided if pageProps.statusCode is 3xx or 4xx
err?: Error; // Only defined if there was an error
pageProps: any; // Props forwarded to the Page component
router?: Router; // Next.js router state
};
/**
* This file is the entry point for all pages,it initialize all pages.
*
* It can be executed server side or browser side.
*
* @see https://nextjs.org/docs/advanced-features/custom-app Custom _app
* @see https://nextjs.org/docs/basic-features/typescript#custom-app TypeScript for _app
*/
const App: React.FunctionComponent<Props> = (props): JSX.Element => {
const { Component,pageProps} = props;
return (
<RecoilRoot>
<Component {...pageProps} />
<RecoilExternalStatePortal />
</RecoilRoot>
);
};
// Anywhere,e.g: src/utils/user.ts
const createUser = (newUser) => {
setRecoilExternalState(lastCreatedUserState,newUser)
}
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。