一、Redux三大原则

  1. 单一数据源

  应用中所有的state都以一个对象树的形式储存在一个单一的store中。 

  2. state只读

  唯一改变state的办法是触发action。action是一个描述发生什么的对象。 

  3. 使用纯函数reducer执行修改

  为了描述action如何改变state树,你需要编写reducer。

二、基本概念

  1. 单一状态树

  首先需要明白 Redux 的单一状态树的概念,所谓的单一状态树,就是指“所有的 state 都以一个对象树的形式储存在一个单一的 store 中。”

  比如我们有这么一个状态树(或者你叫它状态对象也行):

{
text : 'Hello world'
}

  这个状态树就只有一个节点 text,可以用来描述页面中某个文本的内容,比如说一个p标签:

<p> Hello world </p>

  当我们把状态树改变之后,比如:

{
text : 'Hello Stark'
}

  那么p标签也要改变:

<p> Hello Stark </p>

  下面就是Redux最基础的概念:

  “页面中的所有状态or数据,都应该用这种状态树的形式来描述;页面上的任何变化,都应该先去改变这个状态树,然后再通过某种方式实现到页面上。”或者换句话说,我们要做的核心工作,就是用单个对象去描述页面的状态,然后通过改变这个对象来操控页面。

  2. Action

  Action 是一个对象。其中的type属性是必须的,表示 Action 的名称。其他属性可以自由设置。

const action = {
type: 'TEST',
text: 'Redux test'
};

  Action 的任务是描述“发生了什么事情?”

  比如刚才那个例子中我们把 text 从 “Hello world” 变成了 “Hello Stark” ,那么我们应该用一个 Action 对象来描述我们的行为:

function changeText(){
return {
type: 'CHANGE_TEXT',
newText: 'Hello Stark'
}
}

  这个函数会返回一个 Action 对象,这个对象里描述了“页面发生了什么”。store.dispatch接受一个 Action 对象作为参数,将它发送到reducer。

  3. Reducer

  Reducer 的任务是根据传入的 Action 对象去修改状态树。

  或者简单地讲 Reducer 就是一个纯函数, 根据传入的 当前state 和 action ,返回一个新的 state :

(state, action) => newState

  比如我们这个例子中的 Reducer 应该是这样的:

const initialState = {
text : 'Hello world'
} function Reducer(state=initialState, action) {
switch(action.type) {
case 'CHANGE_TEXT':
return {
text : 'Hello Stark'
}
default:
return state;
}
}

  4. Store

  Store 就是把 Reducer 和 action 联系到一起的对象。Store 有以下职责:

  1)维持应用的 state;
  2)提供 getState() 方法获取 state;
  3)提供 dispatch(action) 方法更新 state;
  4)通过 subscribe(listener) 注册监听器;

  简单地说就是你可以这样产生一个 Store :

import { createStore } from 'redux'
let store = createStore(Reducer); //这里的 Reducer 就是刚才的 Reducer 函数 

  然后你可以通过 dispatch 一个 action 来让它改变状态,并通过getState来获得状态:

store.dispatch( changeText() );

store.getState();                // { text : 'Hello Stark' }

  store.dispatch()是 View 发出 Action 的唯一方法。

  它是这样工作的:store.dispatch(action) --> reducer(state, action) --> final state

  

Redux入门学习的更多相关文章

  1. redux相关学习资源

    很多学习资料,直接在SF.掘金搜索关键词redux源码等可以获得. redux参考版本3.6或3.7.2   redux-thunk看1.0.1 1.redux源码分析之四:compose函数    ...

  2. vue入门学习(基础篇)

    vue入门学习总结: vue的一个组件包括三部分:template.style.script. vue的数据在data中定义使用. 数据渲染指令:v-text.v-html.{{}}. 隐藏未编译的标 ...

  3. Hadoop入门学习笔记---part4

    紧接着<Hadoop入门学习笔记---part3>中的继续了解如何用java在程序中操作HDFS. 众所周知,对文件的操作无非是创建,查看,下载,删除.下面我们就开始应用java程序进行操 ...

  4. Hadoop入门学习笔记---part3

    2015年元旦,好好学习,天天向上.良好的开端是成功的一半,任何学习都不能中断,只有坚持才会出结果.继续学习Hadoop.冰冻三尺,非一日之寒! 经过Hadoop的伪分布集群环境的搭建,基本对Hado ...

  5. PyQt4入门学习笔记(三)

    # PyQt4入门学习笔记(三) PyQt4内的布局 布局方式是我们控制我们的GUI页面内各个控件的排放位置的.我们可以通过两种基本方式来控制: 1.绝对位置 2.layout类 绝对位置 这种方式要 ...

  6. PyQt4入门学习笔记(一)

    PyQt4入门学习笔记(一) 一直没有找到什么好的pyqt4的教程,偶然在google上搜到一篇不错的入门文档,翻译过来,留以后再复习. 原始链接如下: http://zetcode.com/gui/ ...

  7. Hadoop入门学习笔记---part2

    在<Hadoop入门学习笔记---part1>中感觉自己虽然总结的比较详细,但是始终感觉有点凌乱.不够系统化,不够简洁.经过自己的推敲和总结,现在在此处概括性的总结一下,认为在准备搭建ha ...

  8. Retrofit 入门学习

    Retrofit 入门学习官方RetrofitAPI 官方的一个例子 public interface GitHubService { @GET("users/{user}/repos&qu ...

  9. MyBatis入门学习教程-使用MyBatis对表执行CRUD操作

    上一篇MyBatis学习总结(一)--MyBatis快速入门中我们讲了如何使用Mybatis查询users表中的数据,算是对MyBatis有一个初步的入门了,今天讲解一下如何使用MyBatis对use ...

随机推荐

  1. Java多线程--JDK并发包(1)

    Java多线程--JDK并发包(1) 之前介绍了synchronized关键字,它决定了额一个线程是否可以进入临界区:还有Object类的wait()和notify()方法,起到线程等待和唤醒作用.s ...

  2. Moon Game (凸四边形个数,数学题)

    Problem 2148 Moon Game Accept: 24    Submit: 61 Time Limit: 1000 mSec    Memory Limit : 32768 KB Pro ...

  3. 杀人游戏(hdu2211)插入法

    杀人游戏 Time Limit: 3000/1000 MS (Java/Others)    Memory Limit: 32768/32768 K (Java/Others) Total Submi ...

  4. ETCD 简介 + 使用

    etcd简介 etcd是一个高可用的分布式键值(key-value)数据库.etcd内部采用raft协议作为一致性算法,etcd基于Go语言实现. etcd是一个服务发现系统,具备以下的特点: 简单: ...

  5. Linux常用基本命令(cut)

    cut命令 作用:从文件的每一行剪切字节,字符或者字段,类似与编程语言中的字符串截取函数 格式:cut [option] [file] -b:仅显示行中指定直接范围的内容: -c:仅显示行中指定范围的 ...

  6. 初学HTML-3

    标题标签:<h#>...</h#>,从h1到h6,字号由大变小. 段落标签:<p>...</p>,在浏览器中独占一行. 空格:" " ...

  7. canvas :原生javascript编写动态时钟

    canvas :原生javascript编写动态时钟     此时针是以画布的中心为圆心: g.translate(width/2,width/2); 此函数是将画布的原点移到(width/2,wid ...

  8. vs中nuget命令的用法

    一.安装 1.安装指定版本类库install-package <程序包名> -version <版本号>        ( 注意:-version <版本号> 可以 ...

  9. Ubuntu16.10上安装NodeJS6.9.2

    1.下载 https://nodejs.org/en/download/ 2.解压 tar -xJf node-v6.9.2-linux-x64.tar.xz 3. 移到通用的软件安装目录 /opt/ ...

  10. UWP开发细节记录:DirectX::XMMATRIX 的坑

    这两天写的代码概率性的崩溃在 XMMatrixMultiply() 函数,XMMatrixMultiply() 本身是 inline 函数可以看到崩溃处的代码: vX = _mm_mul_ps(vX, ...