Redux入门
Redux入门
本文转载自:众成翻译
译者:miaoYu
链接:http://www.zcfy.cc/article/4728
原文:https://bumbu.github.io/simple-redux
本文尝试解释Redux是如何运作的。我们将用Redux创建一个小案列。如果你正在找靠谱的Redux文档,可以去看官方文档。
什么是Redux
来自官方文档的描述:Redux是一个可预测的JavaScript状态容器。换句话说,Redux就是用来处理和管理应用的状态/数据。
如下:
更多图解 点这里_
现在我们来一步一步来解答上面的图代表什么意思。
State(状态)
任何应用都有一个状态。有些状态保存在数据库中,有些状态保存到不同的地方。在Redux中,状态存在一个单一的对象中。它知道哪个页面正打开着,它知道当前用户信息等等。状态可能是标准化,也可以是规范化的,所以当在不同的浏览器打开时,会渲染出相同的应用(同样的页面,同样的用户...)
让我们为计数应用定义我们的状态:
`var initialState = {counter: 0}`
render(渲染)
Redux和React.js一起用效果很好,但是不用react.js也可以。我们用原生JavaScript来把状态渲染到页面:
`<div>-</div>`
function render(state) {
document.getElementById('counter').textContent = state.counter;
}
Actions
如果应用状态发生改变,那是因为有Actions触发了。他们可能是用户操作,也可能是异步操作,定时操作扥等等。我们将定义一个按钮来触发操作。
`<button id="button">Increment</button>`
`document.getElementById('button').addEventListener('click', incrementCounter)`
Store 和 reducer
Actions不会马上改变state。Redux的 store 处理这事:
var store = Redux.createStore(reducer, initialState)
function incrementCounter() {
store.dispatch({
type: 'INCREMENT'
})
}
store保存当前的状态,以及对actions做出反应。当一个action被触发,传入当前的state和当前的action到reducer中,reducer返回新的state,state被更新:
function reducer(state, action) {
if (action.type === 'INCREMENT') {
state = Object.assign({}, state, {counter: state.counter + 1})
}
return state
}
State 改变
当state改变,重新渲染:
store.subscribe(function() {
render(store.getState())
})
一个React.js渲染器可以很好的处理这件事,只更新改变的部分,而不会去更新全部。
第一次渲染
如果action没有被触发就不会渲染,所以我们来触发第一次渲染:
`render(store.getState())`
最终代码
// html
<div>-</div>
<button id="button">Inc</button>
// js
var initialState = {counter: 0}
var store = Redux.createStore(reducer, initialState)
function render(state) {
document.getElementById('counter').textContent = state.counter;
}
document.getElementById('button').addEventListener('click', function() {
incrementCounter()
})
function incrementCounter() {
store.dispatch({
type: 'INCREMENT'
})
}
function reducer(state, action) {
if (action.type === 'INCREMENT') {
state = Object.assign({}, state, {counter: state.counter + 1})
}
return state
}
store.subscribe(function() {
render(store.getState())
})
// 渲染初始化的 state
render(store.getState())
与MobX比较
在Redux中,你可以控制任何事:actions, action的创建,状态更新等等。意味着每个应用程序都是可以预测的。但是导致了很多重复的代码。另一方面,MobX达到相同的效果,但隐藏了一些用户触发的actions,所以你可以写更少的代码。
当然,Redux更加成熟,以及支持一些新特性,比如服务器端渲染和一些很棒的开发工具。
> 原文:https://bumbu.github.io/simple-redux/
Redux入门的更多相关文章
- Redux 入门到高级教程
Redux 是 JavaScript 状态容器,提供可预测化的状态管理. (如果你需要一个 WordPress 框架,请查看 Redux Framework.) Redux 除了和 React 一起用 ...
- Redux 入门教程
Redux 入门教程(三):React-Redux 的用法(53@2016.09.21) Redux 入门教程(二):中间件与异步操作(32@2016.09.20) Redux 入门教程(一):基本用 ...
- redux入门指南
前言:大概一个月没有写博客了,这两天正好是周末,就写点东西来梳理下之前几个月的所写与所得; 大概两个月前,学习了一下 redux ,还是一点难度的,花了我一天的时间来搞明白他, 但是都没怎么记录,今天 ...
- [转] Redux入门教程(快速上手)
学习前提 在我们开始以前,确保你熟悉以下知识: 函数式JavaScript 面向对象JavaScript JavaScript ES6 语法 同时,确保你的设备已经安装: NodeJS Yarn(或者 ...
- redux 入门
背景: 在react中使用redux 重点:不要滥用redux,如果你的页面非常简单,没有 那么多的互动,那么就不要使用redux,反而会增加项目的复杂性. 如果你有以下情况,则可以考虑使用redux ...
- Redux 入门教程(三):React-Redux 的用法
为了方便使用,Redux 的作者封装了一个 React 专用的库 React-Redux,本文主要介绍它. 这个库是可以选用的.实际项目中,你应该权衡一下,是直接使用 Redux,还是使用 React ...
- Redux 入门教程(二):中间件与异步操作
上一篇文章,介绍了 Redux 的基本做法:用户发出 Action,Reducer 函数算出新的 State,View 重新渲染. 但是,一个关键问题没有解决:异步操作怎么办?Action 发出以后, ...
- Redux入门学习
一.Redux三大原则 1. 单一数据源 应用中所有的state都以一个对象树的形式储存在一个单一的store中. 2. state只读 唯一改变state的办法是触发action.action是一个 ...
- Redux 入门教程(一):基本用法
转自http://www.ruanyifeng.com/blog/2016/09/redux_tutorial_part_one_basic_usages.html(仅供个人学习使用) 首先明确一点, ...
随机推荐
- python 处理中文 读取数据库输出全是问号
ref:http://www.cnblogs.com/zhoujie/archive/2013/06/07/problem1.html 1.python连接mssql数据库编码问题 python一直对 ...
- APICloud开发小技巧(二)
1.apicloud中 json.字符串之间的互转 $api.jsonToStr(ret); $api.strToJson(ret) 2.页面的来回跳转 例如已经打开了一个页面,跳转走,改变数据在跳 ...
- Postgresql_最新版11.2源码编译安装
pg官网:https://www.postgresql.org/ yum -y gcc gcc-c++ cmake ncurses-devel perl zlib* .去官网下载源码包. 下载地址:h ...
- javaee IO流作业02
package Zy; import java.io.FileInputStream; import java.io.FileNotFoundException; import java.io.Fil ...
- Java8新特性 Stream流式思想(二)
如何获取Stream流刚开始写博客,有一些不到位的地方,还请各位论坛大佬见谅,谢谢! package cn.com.zq.demo01.Stream.test01.Stream; import org ...
- 软件工程1916|W(福州大学)_助教博客】团队Beta冲刺作业(第9次)成绩公示
1. 作业链接: 项目Beta冲刺(团队) 2. 评分准则: 本次作业包括现场Beta答辩评分(映射总分为100分)+团队互评分数(总分40分)+博客分(总分130分)+贡献度得分,其中博客分由以下部 ...
- 为什么多 TCP 连接比单 TCP 连接传输快
转自: 我观察到,客户端机器从单一服务器使用 HTTP 下载一个文件:1. 单连接下载,速度没有达到客户端网络的最大带宽:2. 多连接同时下载,传输速度有极大的提高,带宽被占满. 假设如下前提:1. ...
- Java中indexof()的使用
Java中字符串中子串的查找共有四种方法(indexof()) indexOf 方法返回一个整数值,指出 String 对象内子字符串的开始位置.如果没有找到子字符串,则返回-1. 如果 starti ...
- 和socket、rs232通信遇到的糟糕问题。备查!
procedure Tfrm_FoldingCloth.btn1Click(Sender: TObject); var SND:array of byte; begin if Not cnrs232. ...
- PAAS平台的web应用性能測试与分析
引言 为什么我会写这一篇博客,由于近期非常多京东云擎jae的用户反应一个问题就是他们部署在jae上面的应用訪问非常慢,有极少数应用甚至常常出现504超时现象.当然大家首先想到的是jae性能太差,这也是 ...