巢狀 Provider

const Providers = ({ children }: Props) => {
 
  return (
    <SWRConfig value={{ errorRetryInterval: 2000 }}>
      <ChakraProvider theme={theme}>
        <NavigationStatesProvider>
            <ContainerProvider>
              <PermissionHandler>
                  <ModalProvider>
                    <SidebarProvider>{children}</SidebarProvider>
                  </ModalProvider>
              </PermissionHandler>
            </ContainerProvider>
        </NavigationStatesProvider>
      </ChakraProvider>
    </SWRConfig>
  );
};
 
export default Providers;
 

推薦1

function combineComponents(...components) {
  return components.reduce(
    (AccumulatedComponents, CurrentComponent) =>
      ({ children }) => {
        return (
          <AccumulatedComponents>
            <CurrentComponent>{children}</CurrentComponent>
          </AccumulatedComponents>
        );
      },
    ({ children }) => <>{children}</>,
  );
}
 
const providers = [CounterProvider, ThemeProvider, UserProvider];
const ContextProviders = combineComponents(...providers);
 

推薦2

const pipe =
  (...fns) =>
  (value) =>
    fns.reduce((acc, fn) => fn(acc), value);
 
const createProvider =
  (Provider, props = {}) =>
  (children) => <Provider {...props}>{children}</Provider>;
 
const ProviderPipeline = pipe(
  createProvider(ThemeProvider, { theme: 'dark' }),
  createProvider(AuthProvider, { apiUrl: '/api' }),
  createProvider(DataProvider, { cache: true }),
);

https://www.threads.com/@this.web/post/DKR8FwVsNGM?xmt=AQF0CxOj7RGOHgY2iqH41dDRZ5ulNYus-ZYYVe8HtrPZvA