1、所有的状态统一放在state中,由store来管理state

2、用户触发一个action行为,由dispatch分发action行为

3、通过store把原有的state的状态值和dispatch分发的action行为一起传给reducer

4、Reducer的作用是返回一个新的state去更新原有的store中对应的state

5、Store接收到新的state然后重新渲染Component

6、每一次store中的state发生变化,通过subscribe这个方法进行监听的,只要是store中的状态发生变化了,那么就会触发这个方法从而实现组件的更新

action:

Action本质就是一个对象,它有一个type属性,type属性是用来判断用户触发的是哪一个行为(是汉译英还是英译汉,就是使用的type来进行判断的),再实际使用的时候并不是直接用的action,而是使用action创建的一个函数,这个函数返回的是一个action

Function add(){    --------------------->add这个action行为对象

Return {type:’add’}

}

Reducer:

Reducer就是一个纯函数,回接收两个参数,第一个参数是需要管理的状态state,第二个参数是action

Reducer回根据传入的action中的type值对state进行不同的操作,从而返回一个新的state,不是再原有的state上进行修改的,如果遇到未知的action的type值,不会对原有的state进行任何修改,返回的是原有的state值

Function reducer(state,action){

Switch(action.type){}

}

Store:

包含整个redux应用的所有状态,需要使用createStore方法生成一个新的store

Store提供的三个方法:

Store.getState()用来获取state值得

Store.dispatch()  用来改变状态得

Store.subscribe() 用来监听state变化得,每当state变化就会调用这个方法

简单小实例//

import React from 'react'
import ReactDom from 'react-dom' ;
import {createStore} from "redux"
class HelloB extends React.Component{
constructor(props){
super(props);
this.state={
msga:"你好,世界"
}
store.subscribe(()=>{
this.setState({
msga:store.getState().msg
})
})
} changeLanguage=()=>{
store.dispatch(actions.sendEnglish())
} render(){
return(
<div>
<h1>{this.state.msga}</h1>
<button onClick={this.changeLanguage}>翻译</button>
</div>
)
} } const actions={
sendChinese:()=>({type:"chinese"}),
sendEnglish:()=>({type:"english"})
} const reducer=(state={},actions)=>{
switch(actions.type){
case "chinese":
return{
state,
msg:"你好,世界"
}
case 'english':
return{
state,
msg:"hellw word"
}
default:
return state
}
} const store=createStore(reducer) //通过接收reducer返回得新的state值生成新的state ReactDom.render( <HelloB/>,
document.getElementById("root")
)

7. redux的更多相关文章

  1. RxJS + Redux + React = Amazing!(译一)

    今天,我将Youtube上的<RxJS + Redux + React = Amazing!>翻译(+机译)了下来,以供国内的同学学习,英文听力好的同学可以直接看原版视频: https:/ ...

  2. 通过一个demo了解Redux

    TodoList小demo 效果展示 项目地址 (单向)数据流 数据流是我们的行为与响应的抽象:使用数据流能帮我们明确了行为对应的响应,这和react的状态可预测的思想是不谋而合的. 常见的数据流框架 ...

  3. RxJS + Redux + React = Amazing!(译二)

    今天,我将Youtube上的<RxJS + Redux + React = Amazing!>的后半部分翻译(+机译)了下来,以供国内的同学学习,英文听力好的同学可以直接看原版视频: ht ...

  4. redux学习

    redux学习: 1.应用只有一个store,用于保存整个应用的所有的状态数据信息,即state,一个state对应一个页面的所需信息 注意:他只负责保存state,接收action, 从store. ...

  5. webpack+react+redux+es6开发模式

    一.预备知识 node, npm, react, redux, es6, webpack 二.学习资源 ECMAScript 6入门 React和Redux的连接react-redux Redux 入 ...

  6. Redux初见

    说到redux可能我们都先知道了react,但我发现,关于react相关的学习资料很多,也有各种各样的种类,但是关于redux简单易懂的资料却比较少. 这里记录一下自己的学习理解,希望可以简洁易懂,入 ...

  7. react+redux教程(八)连接数据库的redux程序

    前面所有的教程都是解读官方的示例代码,是时候我们自己写个连接数据库的redux程序了! 例子 这个例子代码,是我自己写的程序,一个非常简单的todo,但是包含了redux插件的用法,中间件的用法,连接 ...

  8. react+redux教程(七)自定义redux中间件

    今天,我们要讲解的是自定义redux中间件这个知识点.本节内容非常抽象,特别是中间件的定义原理,那多层的函数嵌套和串联,需要极强逻辑思维能力才能完全消化吸收.不过我会多罗嗦几句,所以不用担心. 例子 ...

  9. react+redux教程(六)redux服务端渲染流程

    今天,我们要讲解的是react+redux服务端渲染.个人认为,react击败angular的真正“杀手锏”就是服务端渲染.我们为什么要实现服务端渲染,主要是为了SEO. 例子 例子仍然是官方的计数器 ...

  10. react+redux教程(五)异步、单一state树结构、componentWillReceiveProps

    今天,我们要讲解的是异步.单一state树结构.componentWillReceiveProps这三个知识点. 例子 这个例子是官方的例子,主要是从Reddit中请求新闻列表来显示,可以切换reac ...

随机推荐

  1. PART(Persistent Adaptive Radix Tree)的Java实现源码剖析

    论文地址 Adaptive Radix Tree: https://db.in.tum.de/~leis/papers/ART.pdf Persistent Adaptive Radix Tree: ...

  2. HashMap基本介绍

    1.HashMap简介(本文是按照JDK1.8进行解析) HashMap位于JDK自带jar包rt.jar的java.util目录下. HashMap是一个散列表,存储的内容是键值对<key,v ...

  3. 如何在手机上预览本地h5页面

    很简洁的一个方法: 1.安装nodeJS环境 2.在当前所在项目文件夹下输入命令: npm install anywhere -g3.输入命令: anywhere,即可在浏览器以本机ip地址为域名,自 ...

  4. Golang源码学习:调度逻辑(二)main goroutine的创建

    接上一篇继续分析一下runtime.newproc方法. 函数签名 newproc函数的签名为 newproc(siz int32, fn *funcval) siz是传入的参数大小(不是个数):fn ...

  5. 0507 构造代码块和static案例,接口interface

    0507构造代码块和static案例,接口interface [重点] 1.局部变量,成员变量,静态变量的特点 2.接口 接口语法:interface A {} 接口内的成员变量[缺省属性]publi ...

  6. [COCOS2DX-LUA]0-003.根据COCOS2DX热更新

    一.最近有需求就是要基于COCOS2DX-LUA进行游戏的增量更新,找了资料,发现了COCOS2DX有自带一个热更新的类,就是AssetsManager,但是该接口对于我来说有以下的缺陷 1.版本号在 ...

  7. 非静态代码块(非static初始化块)&静态代码块(static初始化块)

    非静态代码块: TestOrder: package com.aff.singleton; /* 类的第四个成员:初始化块(代码块) 代码块: 如果有修饰的话只能使用static 分类:非静态代码块: ...

  8. DataFrame-选择与切片

    取得DataFrame对象reviews的description列的前10个值(或者说reviews前10行的description列): reviews.iloc[:10].loc[:,'descr ...

  9. windows下nodejs的安装

    1.下载 从nodejs官网下载地址:http://www.nodejs.org 2.安装 双击node-v4.4.0-x64.msi或者其他版本 3.环境搭建 进入cmd命令窗口 进入到nodejs ...

  10. 2017-ICLR-NAS_with_RL-Neural Architecture Search with Reinforcement Learning-论文阅读

    NAS with RL 2017-ICLR-Neural Architecture Search with Reinforcement Learning Google Brain Quoc V . L ...