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 ...
随机推荐
- React:Lifting State Up
在学习React的组件的时候,我也好奇组件间需要共享状态或通信的时候,React是如何处理的.在文档的QUICK START的提到Lifting State Up(状态提升),并不是什么新鲜东西.只是 ...
- 利用logrotate将mysql log截断
https://blog.pythian.com/mysql-log-rotation/ 1.授权用户 CREATE USER 'log_rotate'@'localhost' IDENTIFIED ...
- xtrabackup手册笔记
http://www.cnblogs.com/Amaranthus/archive/2014/08/19/3922570.html#_Toc396231219
- BATJ解决千万级别数据之MySQL 的 SQL 优化大总结
引用 在数据库运维过程中,优化 SQL 是 DBA 团队的日常任务.例行 SQL 优化,不仅可以提高程序性能,还能减低线上故障的概率. 目前常用的 SQL 优化方式包括但不限于:业务层优化.SQL 逻 ...
- WARN: Establishing SSL connection without server’s identity verification is not recommended
问题 使用Spring JDBC 连接 MySQL时,出现如下警告: WARN: Establishing SSL connection without server's identity verif ...
- SQL Server存储过程模拟HTTP请求POST和GET协议
/****** Object: StoredProcedure [dbo].[sp_http_get] Script Date: 05/23/2020 15:47:09 ******/ SET ANS ...
- java中的redis常用操作
https://blog.csdn.net/lixiaoxiong55/article/details/81592800 超详细版 常规操作 public class TestReidsComm ...
- Web前端:2、盒模型的组成
在HTML中,若想要实心划分区域,则:1.添加标签:2.对标签设置尺寸(宽高) 但只要是添加了一个元素(标签),就会在页面中生成一个盒子,不同元素产生的盒子模型可能不同,这取决于它CSS的displa ...
- Ubuntu虚拟机的安装
1.在VMware中新建虚拟机 注意W10的现在强制升级VMware所以大家,安装低版本的时候提示,升级就区官网下载一个新版本的即可. 这边大家填写自己的就好,要记住自己填写的! 这边我们等一会即可. ...
- 【JUC】CyclicBarrier和Semaphore的使用
CyclicBarrier的使用 CyclicBarrier:可以让一组检测到一个屏障时被阻塞,直到最后一个线程到达屏障时,屏障才会开门,所有的屏障拦截的线程才会继续执行,线程进入屏障通过Cyclic ...