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 ...
随机推荐
- python之Python Eclipse+PyDec下载和安装教程(超级详细)
Eclipse 是著名的跨平台 IDE 工具,最初 Eclipse 是 IBM 支持开发的免费 Java 开发工具,2001 年 11 月贡献给开源社区,目前它由非盈利软件供应商联盟 Eclipse ...
- webpack指南(六)命令行环境配置
webpack 命令行环境配置中,通过设置 --env 可以使你根据需要,传入尽可能多的环境变量.在 webpack.config.js 文件中可以访问到这些环境变量. webpack --env.N ...
- codis原理及部署_01
一.codis介绍 Codis是一个分布式Redis解决方案,对于上层的应用来说,连接到Codis Proxy和连接原生的RedisServer没有明显的区别,有部分命令不支持 Codis底层会处理请 ...
- Oracle分页查询语句的写法
分页查询是我们在使用数据库系统时经常要使用到的,下文对Oracle数据库系统中的分页查询语句作了详细的介绍,供您参考. AD:2013云计算架构师峰会精彩课程曝光 Oracle分页查询语句使我们最常用 ...
- HashMap基本介绍
1.HashMap简介(本文是按照JDK1.8进行解析) HashMap位于JDK自带jar包rt.jar的java.util目录下. HashMap是一个散列表,存储的内容是键值对<key,v ...
- 【QT】QT资料集锦
欢迎来到我的博客! 以下链接均是日常学习,偶然得之,并加以收集整理,感兴趣的朋友可以多多访问和学习.如果以下内容对你有所帮助,不妨转载和分享.(Update on 30,November,2019) ...
- 百万年薪架构师一文整理RabbitMQ、ActiveMQ、RocketMQ、Kafka
一般来说,大型应用通常会被拆分成多个子系统,这些子系统可能会部署在多台机器上,也可能只是一台机器的多个进程中,这样的应用就是分布式应用.在讨论分布式应用时,很多初学者会把它和集群这个概念搞混,因为从部 ...
- JAVA自学笔记(4)
发现JAVA的有趣 Day1 继承不是"继承" 1.0 继承的格式 public class FU { public void method() { System.out.prin ...
- R语言入门一
一.数据分析相关概念 数据:是指对事物或对象各方面进行描述的符号,包括事物的基本属性.特征.性质.状态.相互关系等:比如描述人的数据有:身高.年龄.性别.兴趣.性格.婚姻状态等等. 分析:是指把事物或 ...
- Activity组件暴露导致本地拒绝服务
这几天团队打算一起学习Android App漏洞挖掘方面的知识,于是乎拿了一个app当测试例子,争取在上面找到漏洞.在学习过程中发现Android四大组件的安全性还是占有较大的比重,另外比较关心的是数 ...