7. redux
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的更多相关文章
- RxJS + Redux + React = Amazing!(译一)
今天,我将Youtube上的<RxJS + Redux + React = Amazing!>翻译(+机译)了下来,以供国内的同学学习,英文听力好的同学可以直接看原版视频: https:/ ...
- 通过一个demo了解Redux
TodoList小demo 效果展示 项目地址 (单向)数据流 数据流是我们的行为与响应的抽象:使用数据流能帮我们明确了行为对应的响应,这和react的状态可预测的思想是不谋而合的. 常见的数据流框架 ...
- RxJS + Redux + React = Amazing!(译二)
今天,我将Youtube上的<RxJS + Redux + React = Amazing!>的后半部分翻译(+机译)了下来,以供国内的同学学习,英文听力好的同学可以直接看原版视频: ht ...
- redux学习
redux学习: 1.应用只有一个store,用于保存整个应用的所有的状态数据信息,即state,一个state对应一个页面的所需信息 注意:他只负责保存state,接收action, 从store. ...
- webpack+react+redux+es6开发模式
一.预备知识 node, npm, react, redux, es6, webpack 二.学习资源 ECMAScript 6入门 React和Redux的连接react-redux Redux 入 ...
- Redux初见
说到redux可能我们都先知道了react,但我发现,关于react相关的学习资料很多,也有各种各样的种类,但是关于redux简单易懂的资料却比较少. 这里记录一下自己的学习理解,希望可以简洁易懂,入 ...
- react+redux教程(八)连接数据库的redux程序
前面所有的教程都是解读官方的示例代码,是时候我们自己写个连接数据库的redux程序了! 例子 这个例子代码,是我自己写的程序,一个非常简单的todo,但是包含了redux插件的用法,中间件的用法,连接 ...
- react+redux教程(七)自定义redux中间件
今天,我们要讲解的是自定义redux中间件这个知识点.本节内容非常抽象,特别是中间件的定义原理,那多层的函数嵌套和串联,需要极强逻辑思维能力才能完全消化吸收.不过我会多罗嗦几句,所以不用担心. 例子 ...
- react+redux教程(六)redux服务端渲染流程
今天,我们要讲解的是react+redux服务端渲染.个人认为,react击败angular的真正“杀手锏”就是服务端渲染.我们为什么要实现服务端渲染,主要是为了SEO. 例子 例子仍然是官方的计数器 ...
- react+redux教程(五)异步、单一state树结构、componentWillReceiveProps
今天,我们要讲解的是异步.单一state树结构.componentWillReceiveProps这三个知识点. 例子 这个例子是官方的例子,主要是从Reddit中请求新闻列表来显示,可以切换reac ...
随机推荐
- PART(Persistent Adaptive Radix Tree)的Java实现源码剖析
论文地址 Adaptive Radix Tree: https://db.in.tum.de/~leis/papers/ART.pdf Persistent Adaptive Radix Tree: ...
- HashMap基本介绍
1.HashMap简介(本文是按照JDK1.8进行解析) HashMap位于JDK自带jar包rt.jar的java.util目录下. HashMap是一个散列表,存储的内容是键值对<key,v ...
- 如何在手机上预览本地h5页面
很简洁的一个方法: 1.安装nodeJS环境 2.在当前所在项目文件夹下输入命令: npm install anywhere -g3.输入命令: anywhere,即可在浏览器以本机ip地址为域名,自 ...
- Golang源码学习:调度逻辑(二)main goroutine的创建
接上一篇继续分析一下runtime.newproc方法. 函数签名 newproc函数的签名为 newproc(siz int32, fn *funcval) siz是传入的参数大小(不是个数):fn ...
- 0507 构造代码块和static案例,接口interface
0507构造代码块和static案例,接口interface [重点] 1.局部变量,成员变量,静态变量的特点 2.接口 接口语法:interface A {} 接口内的成员变量[缺省属性]publi ...
- [COCOS2DX-LUA]0-003.根据COCOS2DX热更新
一.最近有需求就是要基于COCOS2DX-LUA进行游戏的增量更新,找了资料,发现了COCOS2DX有自带一个热更新的类,就是AssetsManager,但是该接口对于我来说有以下的缺陷 1.版本号在 ...
- 非静态代码块(非static初始化块)&静态代码块(static初始化块)
非静态代码块: TestOrder: package com.aff.singleton; /* 类的第四个成员:初始化块(代码块) 代码块: 如果有修饰的话只能使用static 分类:非静态代码块: ...
- DataFrame-选择与切片
取得DataFrame对象reviews的description列的前10个值(或者说reviews前10行的description列): reviews.iloc[:10].loc[:,'descr ...
- windows下nodejs的安装
1.下载 从nodejs官网下载地址:http://www.nodejs.org 2.安装 双击node-v4.4.0-x64.msi或者其他版本 3.环境搭建 进入cmd命令窗口 进入到nodejs ...
- 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 ...