react中redux的理解
2024-10-09 02:33:05
定义
redux可以看作是flux的进阶版,主要用于react中公共状态(数据)的管理
redux底层原理
redux有一个createStore方法,这个方法用户创建公共存储空间,createStore方法接收一个纯函数作为作为参数,在纯函数中处理数据并返回处理后的数据.当createStore方法执行完成后会返回一个store对象,这个对象内提供一些方法,组件中通过调用store的这些方法去获取或者修改公共存储空间内的数据.
这里说store的几个方法:dispatch用于发送action;store.getState()去获取公共数据;store.subscribe(this.handler)监听公共数据的变化当数据变化的时候去执行handler方法;
这几个方法都类比于flux,打印store看看
redux的执行流程
store公共存储空间中的数据state渲染到组件中,当组件要修改数据的时候,通过store.dispatch(actions)发送action给store,action内容是我们定义的目的是告诉store,state发生了何种变化,在store内部我们会把state(旧的,还没改)和action发送给reducer,reducer根据action在内部处理state,并返回处理后的state给store.组件中使用store.subscribe(this.handler)监听store数据变化,当发现数据变化后,执行指定的回调函数(this.handler),在回调函数内部利用this.setState更新数据(新数据通过store,getState()获取),完成组件的渲染
下图是使用例子
// /store/index.js
import {createStore} from 'redux';
import reducers from './reducers'//reducers是纯函数
const store=createStore(reducers);
export default store; // /store/reducers.js
const defaultState={//defaultState的作用是在第一次执行(初始化)时给state一个值,以防报错
n:10//函数内部必须有一个默认的state
m:20
}
//函数必须返回一个state
export default (state=defaultState,actions)=>{
switch(action.type){
case "ADD_NUM":
//基础类型用Object.assign就可以了(也可以用深拷贝,就是深拷贝耗费性能),引用类型用深拷贝
//let newState=JSON.parse(JSON.stringify(state));
let newState=Object.assign({},state);//必须复制整个state,因为返回也要整个state
newState.n++;
console.log('1',newState)//打印发现1从第二次开始就一直显示了
return newState;
break;
}
console.log('2',state)
return state//打印发现2只显示一次,表明这句代码只有在初始化时执行,因为初始化时,state,action还没有传入值 } //App.js
import React, { Component } from 'react'
import store from './store/index.js';
import {addAction} from './action'
export default class App extends Component {
constructor(){
super();
this.state=store.getState();
store.subscribe(this.updateHancler.bind(this));//store自带方法,等于$on
}
render() {
return (
<div>
<h2>{this.state.n}</h2>
<button onClick={this.clickHandle.bind(this)}>点击</button>
<ul>{//这里要有打括号
list.map((item,index)=>(//用括号包起来表示返回了
<li key={index}>{item}</li>//必须有key
))
}
</ul>
</div>
)
}
clickHandle(){
store.dispatch(addAction())//action必须拆分出来,这是规定
}
updateHancler(){
this.setState(store.getState())
}
}
//action/index.js
import {AddNum} from "./type"
export const addAction = ()=>({
type: AddNum
})
export const updateSubmitActions={//action可以是函数也可以是对象
type:updateSubmit,
}
//action/type.js
export const AddNum = "ADD_NUM"
最新文章
- JS实现页面进入、返回定位到具体位置
- HTML入门教程 这里可以免费学习啦
- 菜鸟的IT生活4
- Gunicorn 和 Nginx
- Visual Studio蛋疼问题解决
- Maven 管理项目 jar出现miss
- vs2013 中HTML页 无法在设计窗口中查看的解决
- Zookeeper 安装和配置
- [UWP]了解模板化控件(3):实现HeaderedContentControl
- LOJ #6042. 「雅礼集训 2017 Day7」跳蚤王国的宰相
- Kafka 特性
- API知识点总结
- HDU 4185 Oil Skimming 【最大匹配】
- 发现一sonar-runner bug
- ML(5)——神经网络1(神经元模型与激活函数)
- Vue零散知识点
- PacBio下机数据如何看?
- HIVE函数的UDF、UDAF、UDTF
- Am335x SPI 驱动测试
- 用PHP收发邮件
热门文章
- string 中的getline
- JavaScript中的作用域和作用域链(边学边写)[看着别人的博客纯手敲]
- 19.SpringCloud实战项目-SpringCloud整合Alibaba-Nacos配置中心
- [PHP]听说随机数mt_rand()比rand()速度快,闲的无聊测试了一下!
- shiro:加密及密码比对器(三)
- 如何将Python项目发布到PyPI
- 二、Go语言开发环境安装与编写第一个Hello World
- PSD转HTML
- discuz 自带的地区四级联动调用方法
- 2019-2020-1 20199310《Linux内核原理与分析》第一周作业