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. flask 三剑客

    1.flask中的httpresponse @app.route("/") # app中的route装饰器 def index(): # 视图函数 return "Hel ...

  2. 347 Top K Frequent Elements 前K个高频元素

    给定一个非空的整数数组,返回其中出现频率前 k 高的元素.例如,给定数组 [1,1,1,2,2,3] , 和 k = 2,返回 [1,2].注意:    你可以假设给定的 k 总是合理的,1 ≤ k ...

  3. 345 Reverse Vowels of a String 反转字符串中的元音字母

    编写一个函数,以字符串作为输入,反转该字符串中的元音字母.示例 1:给定 s = "hello", 返回 "holle".示例 2:给定 s = "l ...

  4. java.net.URISyntaxException: Illegal character in query

    java使用httpclient爬取一个网站的时候,请求:String url3="http://sh.58.com/ershoufang/33562546149042x.shtml?amp ...

  5. c#异步多线程

    1.asyncrel = delegate.BeginInvoke实现委托异步调用. 2.异步等待 asyncrel.IsCompleted用于判断是否执行完毕 or EndInvoke用于等待执行完 ...

  6. [转]STL之vector容器详解

    vector 容器 vector是C++标准模版库(STL,Standard Template Library)中的部分内容.之所以认为是一个容器,是因为它能够像容器一样存放各种类型的对象,简单的说: ...

  7. 《Java编程的逻辑》第四部分 文件

  8. mysql_数据查询_单表查询

    1.单表查询: 1.1选中表中若干列: SELECT子句的<目标列表达式>可以是表中属性列,也可以是表达式,还可以是字符常量. SELECT Sname,'year of birth:', ...

  9. JTable设置表格背景颜色——隔行不同

    package view; import java.awt.Color; import java.awt.Component; import javax.swing.JLabel; import ja ...

  10. demo记录

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta http ...