Do you plan creating a HOC like connect for like disp

Hi, <a class="user-mention notranslate" data-hovercard-type="user" data-hovercard-url=

HOC? about constate HOT 1 CLOSED

diegohaz commented on May 20, 2024

HOC?

from constate.

Comments (1)

diegohaz commented on May 20, 2024

Hi, @goncy.

I have no plans to provide a HOC on this library, unless a lot of people actually demand it. I suggest you and other people interested on this topic to watch this talk by @mjackson: Never Write Another HoC.

That said, this is how a HOC implementation of State could look like:

const withState = stateProps => Component => props => (
  <State {...stateProps}>
    {state => <Component {...props} state={state} />}
  </State>
);

const enhance = withState({
  initialState: { count: 0 },
  actions: {
    increment: amount => state => ({ count: state.count + amount })
  },
  context: 'counter1'
});

const CounterValue = enhance(({ state }) => (
  <div>{state.count}</div>
));

One of the drawbacks is that you need to pass stateProps statically to withState. You can't pass context from within CounterValue for example.

I recommend you to stick with render props and use one of the following approaches to access state in React lifecycles:

Create another component:

class Component extends React.Component {
  componentDidMount() {
    this.props.increment(1);
  }

  render() {
    return <div>{this.props.count}</div>;
  }
}

const Counter = () => (
  <CounterState context="counter1">
    {state => <Component {...state} />}
  </CounterState>
);

Use https://github.com/reactions/component:

import Component from "@reactions/component";

const Counter = () => (
  <CounterState context="counter1">
    {({ count, increment }) => (
      <Component didMount={() => increment(1)}>
        <div>{count}</div>
      </Component>
    )}
  </CounterState>
);