[React] Refactor a connected Redux component to use Unstated

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>

);

巴特西

[React] Refactor a connected Redux component to use Unstated

最新文章

热门文章