How to combo multiple ContextProvider

[hangyangws]

I learn the Hooks，it's so good!
Bug when I use hooks: useReducer。I confused by multiple provider.

my simple files

1. app.js:

import Provider from './store/index.js';

ReactDOM.render(
  <Provider>
    <Router history={history}>
      <Layout>
        <Switch>
          <Route ... />
        </Switch>
      </Layout>
    </Router>
  </Provider>,
  CONTAINER
);

2. ./store/index.js

import providerOne from './providerOne.js';
import ProviderTwo from './providerTwo.js';
import ProviderThree from './providerThree.js';
// there maybe have many providers...

return (
  <ProviderOne>
    <ProviderTwo>
      <ProviderThree>
        {props.children}
      </ProviderThree>
    </ProviderTwo>
  </ProviderOne>
);

3. ./store/providerOne.js

const Context = React.createContext();

const initState = [];
const reducer = (state, action) => {
  switch (action.type) {
    case 'xxx':
      return xxx;
    default:
      return state;
  }
};

const ProviderOne = (props) => {
  const [state, dispatch] = React.useReducer(reducer, initState);

  return <Context.Provider value={{ state, dispatch }}>{props.children}</Context.Provider>;
};

export default ProviderOne;

my confusion

In file ./store/index.js, I must write many times <Provider> structure.
There is any way to solve it.

[tmenyhart]

Hey @hangyangws , I was just thinking about the same problem, and I've found the solution for this in this repo: https://github.com/FormidableLabs/react-context-composer

This solution was fine for me, hope it helps you too.

Simply put, if you want to get rid of the deep nesting of context providers you can write a util functional component like this:

export const ContextProviderComposer = ({contextProviders, children}) => {
  return contextProviders.reduceRight((children, parent, index) => React.cloneElement(parent, { children }), children);
};

ContextProviderComposer.propTypes = {
  contextProviders: PropTypes.arrayOf(
    PropTypes.element,
  ).isRequired,
  children: PropTypes.node.isRequired,
};

And you can use it in a component by listing your context providers:

import providerOne from './providerOne.js';
import ProviderTwo from './providerTwo.js';
import ProviderThree from './providerThree.js';

return (
  <ContextProviderComposer contextProviders={[
    <ProviderOne key={0}/>
    <ProviderTwo key={1}/>
    <ProviderThree key={2}/>
  ]}>
    { props.children }
  </ContextProviderComposer>
);

[aweary]

We use the issue tracker for bug reports and feature requests.

If you have a question, please check our community support resources:
https://facebook.github.io/react/community/support.html

[csr632]

I have created another state management library that is better at service composition. Here is a demo of avoiding provider hell. Feel free to try it or read its source(100 lines of code)!

[nanxiaobei]

react-easy-contexts, A simple tool to add multiple React contexts easily.

https://github.com/nanxiaobei/react-easy-contexts

import { create, useProvider } from 'react-easy-contexts';

const ctx = create({
  useX() {
    const [x, setX] = useState(0);
    return useMemo(() => ({ x, setX }), [x]);
  },
  useY() {
    const [y, setY] = useState(0);
    return useMemo(() => ({ y, setY }), [y]);
  },
  useZ() {
    const [z, setZ] = useState(0);
    return useMemo(() => ({ z, setZ }), [z]);
  },
});

const App = () => {
  const Provider = useProvider(ctx);
  return (
    <Provider>
      <AppMain />
    </Provider>
  );
};