[React] Refactor a connected Redux component to use Unstated

Posted 2020-11-18 answer1215

In this lesson, I refactor a simple Counter component connected to Redux to use Unstated instead. I explain some of the cognitive overhead of working with Redux and how Unstated can help simplify your application codebase.

Additional Resources https://github.com/jamiebuilds/unstated

 

A basic example for Unstated:

/**
 * Unstated Example
 */
import React from "react";
import ReactDOM from "react-dom";
import Counter from "./components/Counter";
import { Provider, Subscribe, Container } from "unstated";

class CounterContainer extends Container {
  state = {
    count: 0
  };

  increment() {
    this.setState({ count: this.state.count + 1 });
  }

  decrement() {
    this.setState({ count: this.state.count - 1 });
  }
}

const ConnectedCounter = () => (
  <Subscribe to={[CounterContainer]}>
    {counter => (
      <Counter
        value={counter.state.count}
        onIncrement={() => counter.increment()}
        onDecrement={() => counter.decrement()}
      />
    )}
  </Subscribe>
);

ReactDOM.render(
  <Provider>
    <ConnectedCounter />
  </Provider>,
  document.getElementById("root")
);

 

We use:

<Subscribe to={[CounterContainer]>

I means we want to keep the state for the component itself.

We can do some interesting things with <Provider> as well like dependency injection:

let counter = new CounterContainer();

render(
  <Provider inject={[counter]}>
    <Counter />
  </Provider>
);