why Provider always at the top level？

[wangcongyi]

I have an increasingly complex application.
One day I need redux, and add the Provider component at the top level,
On another day I need react-query, and add the QueryClientProvider component at the top level too.
etc...
After many times the code is like this:

<ConfigProvider locale={zhCN}>
  <QueryClientProvider client={queryClient}>
    <Provider store={store}>
      <Router basename={basename}>
        <Layout />
      </Router>
    </Provider>
  </QueryClientProvider>
</ConfigProvider>

I worry that it will increase more and more in the future.
so Why provider (including other tools or libraries ) always at the top level？
Is this for convenience or what? Why do we need provider?

[phryneas]

So that your application knows which store to use.

[wangcongyi]

so I think redux is more likely a transfer tool.

[phryneas]

I'm not really sure what you mean by a transfer tool, you would need to describe that.
Generally, Redux is a state management library.
React-Redux is a library to use that state in React, and you need to use the provider so your hooks know about the store the data is in.

[wangcongyi]

the 'root provider' creates a contextValue and a 'root subscription' and store.
Pass contextValue to descendant components through react context.
so I think provider is more like transfer component.

Is the provider the only way? Is there a better way to write it instead of the nested form?

[wangcongyi]

https://twitter.com/dan_abramov/status/1563307506482696192