Reqeust: with(apply)Provider(Container) HOC about constate HOT 10 CLOSED

For now, you can just create an utility function in your app:

const nest = (...components) => props =>
  components.reduceRight(
    (children, Current) => <Current {...props}>{children}</Current>,
    props.children
  );

I'm gonna use this too.

from constate.

Hey @zheeeng.

I agree that this is annoying. I've also been through that.

But I think this solution could be misleading. One could think that enhancing a component with withProvider would allow it to access a sort of container's global state, which obviously doesn't work. I guess it would be really common because people are used to this behavior (redux connect, withTheme etc.).

In other words, people would just do withProvider(MainCounter)(Count) and withProvider(MainCounter)(Button) and expect both components share the same state.

from constate.

Maybe something like recompose#nest would be better:

export default nest(MainCounter.Provider, DynamicImportedRoutePage);

from constate.

React hook is designed as a replacement for recompose, I think.

from constate.

I'm from material-ui, and its withTheme seems clarified ppl that the theme context is derived from the nearest ThemeProvider, not the global theme.

from constate.

I'm from material-ui, and its withTheme seems clarified ppl that the theme context is derived from the nearest ThemeProvider, not the global theme.

Yeah! By "global state" I meant a root Provider as the nearest one. withSomething will usually wrap the component with a consumer. But withProvider would wrap the component with a new instance of the container's Provider with its own state. That's why I think it might be confusing.

from constate.

I've seen that it's really hard for people to understand how React Providers work.

import React, { useState } from "react";
import createContainer from "constate";

function useCounter({ initialCount = 0 }) {
  const [count, setCount] = useState(initialCount);
  const increment = () => setCount(count + 1);
  return { count, increment };
}

const CounterContainer = createContainer(useCounter);

function App() {
  return (
    <CounterContainer.Provider initialCount={2}>
      <Foo />
    </CounterContainer.Provider>
    <CounterContainer.Provider initialCount={10}>
      <Bar />
    </CounterContainer.Provider>
  );  
}

In the example above, Foo and Bar will access different states even though they have the same shape ({ count, increment }). Calling increment from Foo will have no effect on the state consumed by Bar.

Note: I'm not saying that you don't understand that. I'm just leaving it here because I know people will come to this issue with this confusion.

from constate.

Yeah, I know it an idea about fractal context. I'm seeking a convenient way to consume the context immediately in the current component(the DynamicImportedRoutePage). Otherwise, I have to:

function DynamicImportedRoutePage () {
   return  <MainCounter.Provider><AntoherComponentConsumeContextAndRenderCountAndButton /></MainCounter.Provider>
}

The HOC is used to wrap the current Componet with container's provider (for hoisting context to its component scope).

from constate.

Maybe this package can help: with-wrapper

from constate.

Closing this issue as there are enough alternatives. I recommend this one: #61 (comment)

from constate.