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触发了。他们可能是用户操作,也可能是异步操作,定时操作扥等等。我们将定义一个按钮来触发操作。

`&lt;button id="button"&gt;Increment&lt;/button&gt;`

`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())`

最终代码

jsfiddle

// html
<div>-</div>
&lt;button id="button"&gt;Inc&lt;/button&gt;
// 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入门的更多相关文章

  1. Redux 入门到高级教程

    Redux 是 JavaScript 状态容器,提供可预测化的状态管理. (如果你需要一个 WordPress 框架,请查看 Redux Framework.) Redux 除了和 React 一起用 ...

  2. Redux 入门教程

    Redux 入门教程(三):React-Redux 的用法(53@2016.09.21) Redux 入门教程(二):中间件与异步操作(32@2016.09.20) Redux 入门教程(一):基本用 ...

  3. redux入门指南

    前言:大概一个月没有写博客了,这两天正好是周末,就写点东西来梳理下之前几个月的所写与所得; 大概两个月前,学习了一下 redux ,还是一点难度的,花了我一天的时间来搞明白他, 但是都没怎么记录,今天 ...

  4. [转] Redux入门教程(快速上手)

    学习前提 在我们开始以前,确保你熟悉以下知识: 函数式JavaScript 面向对象JavaScript JavaScript ES6 语法 同时,确保你的设备已经安装: NodeJS Yarn(或者 ...

  5. redux 入门

    背景: 在react中使用redux 重点:不要滥用redux,如果你的页面非常简单,没有 那么多的互动,那么就不要使用redux,反而会增加项目的复杂性. 如果你有以下情况,则可以考虑使用redux ...

  6. Redux 入门教程(三):React-Redux 的用法

    为了方便使用,Redux 的作者封装了一个 React 专用的库 React-Redux,本文主要介绍它. 这个库是可以选用的.实际项目中,你应该权衡一下,是直接使用 Redux,还是使用 React ...

  7. Redux 入门教程(二):中间件与异步操作

    上一篇文章,介绍了 Redux 的基本做法:用户发出 Action,Reducer 函数算出新的 State,View 重新渲染. 但是,一个关键问题没有解决:异步操作怎么办?Action 发出以后, ...

  8. Redux入门学习

    一.Redux三大原则 1. 单一数据源 应用中所有的state都以一个对象树的形式储存在一个单一的store中. 2. state只读 唯一改变state的办法是触发action.action是一个 ...

  9. Redux 入门教程(一):基本用法

    转自http://www.ruanyifeng.com/blog/2016/09/redux_tutorial_part_one_basic_usages.html(仅供个人学习使用) 首先明确一点, ...

随机推荐

  1. python 处理中文 读取数据库输出全是问号

    ref:http://www.cnblogs.com/zhoujie/archive/2013/06/07/problem1.html 1.python连接mssql数据库编码问题 python一直对 ...

  2. APICloud开发小技巧(二)

    1.apicloud中 json.字符串之间的互转 $api.jsonToStr(ret); $api.strToJson(ret)  2.页面的来回跳转 例如已经打开了一个页面,跳转走,改变数据在跳 ...

  3. Postgresql_最新版11.2源码编译安装

    pg官网:https://www.postgresql.org/ yum -y gcc gcc-c++ cmake ncurses-devel perl zlib* .去官网下载源码包. 下载地址:h ...

  4. javaee IO流作业02

    package Zy; import java.io.FileInputStream; import java.io.FileNotFoundException; import java.io.Fil ...

  5. Java8新特性 Stream流式思想(二)

    如何获取Stream流刚开始写博客,有一些不到位的地方,还请各位论坛大佬见谅,谢谢! package cn.com.zq.demo01.Stream.test01.Stream; import org ...

  6. 软件工程1916|W(福州大学)_助教博客】团队Beta冲刺作业(第9次)成绩公示

    1. 作业链接: 项目Beta冲刺(团队) 2. 评分准则: 本次作业包括现场Beta答辩评分(映射总分为100分)+团队互评分数(总分40分)+博客分(总分130分)+贡献度得分,其中博客分由以下部 ...

  7. 为什么多 TCP 连接比单 TCP 连接传输快

    转自: 我观察到,客户端机器从单一服务器使用 HTTP 下载一个文件:1. 单连接下载,速度没有达到客户端网络的最大带宽:2. 多连接同时下载,传输速度有极大的提高,带宽被占满. 假设如下前提:1. ...

  8. Java中indexof()的使用

    Java中字符串中子串的查找共有四种方法(indexof()) indexOf 方法返回一个整数值,指出 String 对象内子字符串的开始位置.如果没有找到子字符串,则返回-1. 如果 starti ...

  9. 和socket、rs232通信遇到的糟糕问题。备查!

    procedure Tfrm_FoldingCloth.btn1Click(Sender: TObject); var SND:array of byte; begin if Not cnrs232. ...

  10. PAAS平台的web应用性能測试与分析

    引言 为什么我会写这一篇博客,由于近期非常多京东云擎jae的用户反应一个问题就是他们部署在jae上面的应用訪问非常慢,有极少数应用甚至常常出现504超时现象.当然大家首先想到的是jae性能太差,这也是 ...