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 

 

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 = () => (  
     
          {counter => (      
      
        counter.increment()}        onDecrement={() => counter.decrement()}      />    )}  
      
     );ReactDOM.render(  
         
        
     ,  document.getElementById("root"));

 

We use:

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(  
         
        
     );