[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的更多相关文章
- [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 ...
- 如何在非 React 项目中使用 Redux
本文作者:胡子大哈 原文链接:https://scriptoj.com/topic/178/如何在非-react-项目中使用-redux 转载请注明出处,保留原文链接和作者信息. 目录 1.前言 2. ...
- 【前端】react学习阶段总结,学习react、react-router与redux的这些事儿
前言 借用阮一峰的一句话:真正学会 React 是一个漫长的过程. 这句话在我接触react深入以后,更有感触了.整个react体系都是全新的,最初做简单的应用,仅仅使用react-tools打包js ...
- 如何优雅地在React项目中使用Redux
前言 或许你当前的项目还没有到应用Redux的程度,但提前了解一下也没有坏处,本文不会安利大家使用Redux 概念 首先我们会用到哪些框架和工具呢? React UI框架 Redux 状态管理工具,与 ...
- 优雅的在React项目中使用Redux
概念 首先我们会用到哪些框架和工具呢? React UI框架 Redux 状态管理工具,与React没有任何关系,其他UI框架也可以使用Redux react-redux React插件,作用:方便在 ...
- 前端笔记之React(五)Redux深入浅出
一.Redux整体感知 Redux是JavaScript状态管理容器,提供了可被预测状态的状态管理容器.来自于Flux思想,Facebook基于Flux思想,在2015年推出Redux库. 中文网站: ...
- react,react-router,redux+react-redux 构建一个React Demo
创建初始化应用 加速我们的npm. npm install -g cnpm --registry=https://registry.npm.taobao.org 利用create-react-app ...
- react、react-router、redux 也许是最佳小实践1
小前言 这是一个小小的有关react的小例子,希望通过一个小例子,可以让新手更好的了解到react.react-router4.0.redux的集中使用方法. 这是基于create-react-app ...
- 【转】浅谈React、Flux 与 Redux
本文转自<浅谈React.Flux 与 Redux>,转载请注明出处. React React 是一个 View 层的框架,用来渲染视图,它主要做几件事情: 组件化 利用 props 形成 ...
随机推荐
- flask 三剑客
1.flask中的httpresponse @app.route("/") # app中的route装饰器 def index(): # 视图函数 return "Hel ...
- 347 Top K Frequent Elements 前K个高频元素
给定一个非空的整数数组,返回其中出现频率前 k 高的元素.例如,给定数组 [1,1,1,2,2,3] , 和 k = 2,返回 [1,2].注意: 你可以假设给定的 k 总是合理的,1 ≤ k ...
- 345 Reverse Vowels of a String 反转字符串中的元音字母
编写一个函数,以字符串作为输入,反转该字符串中的元音字母.示例 1:给定 s = "hello", 返回 "holle".示例 2:给定 s = "l ...
- java.net.URISyntaxException: Illegal character in query
java使用httpclient爬取一个网站的时候,请求:String url3="http://sh.58.com/ershoufang/33562546149042x.shtml?amp ...
- c#异步多线程
1.asyncrel = delegate.BeginInvoke实现委托异步调用. 2.异步等待 asyncrel.IsCompleted用于判断是否执行完毕 or EndInvoke用于等待执行完 ...
- [转]STL之vector容器详解
vector 容器 vector是C++标准模版库(STL,Standard Template Library)中的部分内容.之所以认为是一个容器,是因为它能够像容器一样存放各种类型的对象,简单的说: ...
- 《Java编程的逻辑》第四部分 文件
- mysql_数据查询_单表查询
1.单表查询: 1.1选中表中若干列: SELECT子句的<目标列表达式>可以是表中属性列,也可以是表达式,还可以是字符常量. SELECT Sname,'year of birth:', ...
- JTable设置表格背景颜色——隔行不同
package view; import java.awt.Color; import java.awt.Component; import javax.swing.JLabel; import ja ...
- demo记录
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta http ...