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的更多相关文章

  1. [React] Refactor a Stateful List Component to a Functional Component with React PowerPlug

    In this lesson we'll look at React PowerPlug's <List /> component by refactoring a normal clas ...

  2. 如何在非 React 项目中使用 Redux

    本文作者:胡子大哈 原文链接:https://scriptoj.com/topic/178/如何在非-react-项目中使用-redux 转载请注明出处,保留原文链接和作者信息. 目录 1.前言 2. ...

  3. 【前端】react学习阶段总结,学习react、react-router与redux的这些事儿

    前言 借用阮一峰的一句话:真正学会 React 是一个漫长的过程. 这句话在我接触react深入以后,更有感触了.整个react体系都是全新的,最初做简单的应用,仅仅使用react-tools打包js ...

  4. 如何优雅地在React项目中使用Redux

    前言 或许你当前的项目还没有到应用Redux的程度,但提前了解一下也没有坏处,本文不会安利大家使用Redux 概念 首先我们会用到哪些框架和工具呢? React UI框架 Redux 状态管理工具,与 ...

  5. 优雅的在React项目中使用Redux

    概念 首先我们会用到哪些框架和工具呢? React UI框架 Redux 状态管理工具,与React没有任何关系,其他UI框架也可以使用Redux react-redux React插件,作用:方便在 ...

  6. 前端笔记之React(五)Redux深入浅出

    一.Redux整体感知 Redux是JavaScript状态管理容器,提供了可被预测状态的状态管理容器.来自于Flux思想,Facebook基于Flux思想,在2015年推出Redux库. 中文网站: ...

  7. react,react-router,redux+react-redux 构建一个React Demo

    创建初始化应用 加速我们的npm. npm install -g cnpm --registry=https://registry.npm.taobao.org 利用create-react-app ...

  8. react、react-router、redux 也许是最佳小实践1

    小前言 这是一个小小的有关react的小例子,希望通过一个小例子,可以让新手更好的了解到react.react-router4.0.redux的集中使用方法. 这是基于create-react-app ...

  9. 【转】浅谈React、Flux 与 Redux

    本文转自<浅谈React.Flux 与 Redux>,转载请注明出处. React React 是一个 View 层的框架,用来渲染视图,它主要做几件事情: 组件化 利用 props 形成 ...

随机推荐

  1. Java Itext 生成PDF文件

    利用Java Itext生成PDF文件并导出,实现效果如下: PDFUtil.java package com.jeeplus.modules.order.util; import java.io.O ...

  2. ACM_最短网络(最小生成树)

    Problem Description: Farmer John has been elected mayor of his town! One of his campaign promises wa ...

  3. gerrit项目配置

    1. 相关约定说明: 1.1 gerrit服务器ip地址:192.168.130.10 1.2 gerrit服务器端用户名:gerrit 1.3 gerrit用户端管理员:admin 1.4 ssh端 ...

  4. MySQL的安装和启动

    一.MySQL各类安装方法的比较 在Linux系统下,MySQL有3种主要的安装方式,分别是:RPM安装.二进制安装.源码安装.三种安装方式的优缺点如下表所示:   RPM安装 二进制安装 源码安装 ...

  5. 316 Remove Duplicate Letters 去除重复字母

    给定一个仅包含小写字母的字符串,去除重复的字母使得所有字母出现且仅出现一次.你必须保证返回结果是所有可能结果中的以字典排序的最短结果.例如:给定 "bcabc"返回 "a ...

  6. Elasticsearch之CURL命令的HEAD

    如果只想检查一些文档是否存在,我们可以使用HEAD来替代GET方法,这样就只会返回HTTP头文件. [hadoop@master elasticsearch-]$ curl -i XHEAD http ...

  7. Elasticsearch之sense插件的安装(图文详解)

    sense插件可以方便的执行rest请求,但是中文输入的体验不是很好. 安装sense只需要在Kibana端安装插件即可,插件会自动安装到kibana的应用菜单中. [hadoop@master ki ...

  8. 高级Java知识

    高级Java知识(JVM.字节码.内存模型) 内存=方法区+栈空间+堆+程序计数器 栈(stack)包括虚拟机栈(VM stack)和本地方法栈(native method stack). 方法区(m ...

  9. 如何设置“用eclipse开发时自动在顶端产生import”?

    eclipse新版本中的默认设置可能导致自动在生成import时是在代码中,而大多数时间我们需要自动生成import在代码顶端,按照如下设置即可纠正

  10. rrdtool 实践

    rrdtool 实践 rrdtool 参数比较多,如果直接看文档,不知从何入手,直接从例子入手这样容易理解,模拟网卡流量 1. 创建数据库 rrdtool create Flow.rrd --star ...