在react项目中使用redux-thunk,react-redux,redux;使用总结
先看是什么,再看怎么用:
redux-thunk是一个redux的中间件,用来处理redux中的复杂逻辑,比如异步请求;
redux-thunk
中间件可以让action
创建函数先不返回一个action
对象,而是返回一个函数;
react-redux相当于一个适配react的一个redux插件;redux本身可以在任何项目中使用,react-redux带来了更适合react的方法;
而redux就是来管理数据的一个仓库了。
核心概念是使用store来作为一个数据仓库,所有组件都来通过数据来渲染视图,react提供了数据到视图的实时更新,这也就是react框架的命名来源吧;
redux中几个关键词;actionType,actionCreators,store,reducer: 这也是项目中划分文件的方式,将redux中每个功能划分成单独的文件来管理,
使用redux流程,脑中要时时刻刻记住一张图如下:
我们将所有需要管理的数据需要交给redux来管理,redux需要首先定义默认state放在reducers之中,而一般情况下组件会通过派发(dispatch)一个action来从store中获取数据,store中存储数据的地方是reducer.js;所以一般情况下会在reducer中return一个newState出来给store 而在组件中获取store的数据的方法就需要订阅(subscribe)store 这样组件的state就会改变;
一般情况下的store文件夹里分为reducer.js index.js constants.js(或者是actionType.js) 以及actionCreators.js
首先组件要获取数据,会先创建一个action,这个action是一个对象,包含action的类型(就是actionType)和值 然后store去派发这个action,store接受到action之后会交给reducer.js来处理,这里存放了默认数据和处理之后的数据,reducer处理好数据之后,返回一个新的state给store; 然后组件需要获取这个新的state,一般情况是通过setState来获取函数store; 设置当前组件的state; ;this.setState(store.getState())
而react-redux的作用是提供了 Provider组件来让所有组件共享所有的状态(官话:Provider提供的是一个顶层容器的作用);如下代码中 store作为一个属性来给到provider 所有的组件都可以共享这个状态,并且react-redux提供了connect 方法来连接mapStateToProps 、mapDispatchToProps 和组件
connect常见用法如下
const mapStateToProps = (state) => {
return{
focused: state.getIn(['header','focused']),
//从header 总的reducer里面找focus的值
//focused: state.get('header').get('focused')
list:state.getIn(['header','list']),
page:state.getIn(['header','page']),
mouseIn: state.getIn(['header','mouseIn']),
totalPage:state.getIn(['header','totalPage'])
}
}
const mapDispatchToProps = (dispatch) => {
return{
handleInputFocus(list){
//console.log(list)
if(list.size === 0){
dispatch(actionCreators.getList())
}
dispatch(actionCreators.input_Focus())
},
handleInputBlur(){
dispatch(actionCreators.input_Blur())
},
handleMouseEnter(){
dispatch(actionCreators.mouseEnter())
},
handleMouseLeave(){
dispatch(actionCreators.mouseLeave())
},
handleChangePage(page,totalPage){
console.log(page,totalPage)
if(page<totalPage){
dispatch(actionCreators.ChangePage(page+1))
}else{
dispatch(actionCreators.ChangePage(1))
}
}
}
}
export default connect(mapStateToProps,mapDispatchToProps)(Header); //连接Header组件和mapStateToProps,mapDispatchToProps
<Provider store={store}>
<div>
<Globalstyle/>
<Header/>
<BrowserRouter>
<div>
<Route path='/' exact redirect='/home' component={Home}/>
<Route path='/detail' component={Detail}/>
</div>
</BrowserRouter>
<Globalstyleicon/>
</div>
</Provider>
通常情况下,我们的项目可能会有庞大的数据,所以一般情况下会将store单独拆分到每个组件之中,这个时候就需要我们来使用combineReducers 来连接所有的状态;
import {combineReducers} from 'redux-immutable'
通常情况下总的reduce代码如下
import {combineReducers} from 'redux-immutable' //让生成的数据是immutable数据内容
import {reducer as headerReducer} from '../common/header/store' //从header组件的reducer中引入reducer来结合 const reducer = combineReducers({
header:headerReducer
})
export default reducer
同时,我们的state数据不能随便改变,这个时候就需要引入immutable来对数据进行管理(某个博客这样写的:
JavaScript 中的对象一般是可变的(Mutable),因为使用了引用赋值,新的对象简单的引用了原始对象,改变新的对象将影响到原始对象。如 foo={a: 1}; bar=foo; bar.a=2
你会发现此时 foo.a
也被改成了 2
。虽然这样做可以节约内存,但当应用复杂后,这就造成了非常大的隐患,Mutable 带来的优点变得得不偿失。为了解决这个问题,一般的做法是使用 shallowCopy(浅拷贝)或 deepCopy(深拷贝)来避免被修改,但这样做造成了 CPU 和内存的浪费。
)
immutable中常用的方法:
1:fromJS 把一个普通对象改变成一个immutable对象
2:set immutable对象的set方法,会结合之前immutable对象的值和设置的值,返回一个新的对象 使用如下: state.set('focused',true);
3:get : get() 、 getIn() 可以用来获取数据 如下使用: state.getIn(['header','list']) 等价于state.get('header').get('focused')
4:merge(浅合并,新数据与旧数据对比,旧数据中不存在的属性直接添加,就数据中已存在的属性用新数据中的覆盖)
merge使用如下:
state.merge({
list:action.data,
totalPage:action.totalPage
})
我的代码仓库:https://github.com/qiaoqiao10001
在react项目中使用redux-thunk,react-redux,redux;使用总结的更多相关文章
- redux在react项目中的应用
今天想跟大家分享一下redux在react项目中的简单使用 1 1.redux使用相关的安装 yarn add redux yarn add react-redux(连接react和redux) 2. ...
- 如何优雅地在React项目中使用Redux
前言 或许你当前的项目还没有到应用Redux的程度,但提前了解一下也没有坏处,本文不会安利大家使用Redux 概念 首先我们会用到哪些框架和工具呢? React UI框架 Redux 状态管理工具,与 ...
- 优雅的在React项目中使用Redux
概念 首先我们会用到哪些框架和工具呢? React UI框架 Redux 状态管理工具,与React没有任何关系,其他UI框架也可以使用Redux react-redux React插件,作用:方便在 ...
- 如何在非 React 项目中使用 Redux
本文作者:胡子大哈 原文链接:https://scriptoj.com/topic/178/如何在非-react-项目中使用-redux 转载请注明出处,保留原文链接和作者信息. 目录 1.前言 2. ...
- react项目中引入了redux后js控制路由跳转方案
如果你的项目中并没有用到redux,那本文你可以忽略 问题引入 纯粹的单页面react应用中,通过this.props.history.push('/list')就可以进行路由跳转,但是加上了redu ...
- 深入浅出TypeScript(5)- 在React项目中使用TypeScript
前言 在第二小节中,我们讨论了利用TypeScript创建Web项目的实现,在本下节,我们讨论一下如何结合React创建一个具备TypeScript类型的应用项目. 准备 Webpack配置在第二小节 ...
- react项目中实现元素的拖动和缩放实例
在react项目中实现此功能可借助 react-rnd 库,文档地址:https://github.com/bokuweb/react-rnd#Screenshot .下面是实例运用: import ...
- React项目中实现右键自定义菜单
最近在react项目中需要实现一个,右键自定义菜单功能.找了找发现纯react项目里没有什么工具可以实现这样的功能,所以在网上搜了搜相关资料.下面我会附上完整的组件代码. (注:以下代码非本人原创,具 ...
- React项目中使用Mobx状态管理(二)
并上一节使用的是普通的数据状态管理,不过官方推荐使用装饰器模式,而在默认的react项目中是不支持装饰器的,需要手动启用. 官方参考 一.添加配置 官方提供了四种方法, 方法一.使用TypeScrip ...
随机推荐
- 微信小程序清除缓冲
1:wxml定义一个清除缓冲的按钮,并绑定触摸事件 <button bindtap="clear">清空缓冲</button> 2:wxjs定义方法: // ...
- LOTO新型号支持串口蓝牙示波器
LOTO串口/蓝牙示波器面世 LOTO一直专注在虚拟示波器领域,以USB虚拟示波器为基础,扩展了很多功能模块,可以把Windows示波器,信号源,逻辑分析仪,频谱分析,数据记录,安卓手机平板支持,隔离 ...
- LGP5386题解
写在前面的废话 自己写了两天,调了半天,然后jzp来帮忙调了一个小时,终于过了 过的时候耳机里放着桐姥爷的bgm,就差哭出来了 题解 首先这题没有部分分差评( 值域不变 我们可以注意到,如果一个区间全 ...
- 【Linux基础】ps命令详解
PS命令介绍 Linux中的ps命令是Process Status的缩写.ps命令用来列出系统中当前运行的那些进程.ps命令列出的是当前那些进程的快照,就是执行ps命令的那个时刻的那些进程,如果想要动 ...
- 6月15日 python学习总结 Django模板语言相关内容
Django模板语言相关内容 Django模板系统 官方文档 常用语法 只需要记两种特殊符号: {{ }}和 {% %} 变量相关的用{{}},逻辑相关的用{%%}. 变量 {{ 变量名 }} ...
- tensorflow2.4与目标检测API在3060显卡上的配置安装
目前,由于3060显卡驱动版本默认>11.0,因此,其不能使用tensorflow1版本的任何接口,所以学习在tf2版本下的目标检测驱动是很有必要的,此配置过程同样适用于任何30系显卡配置tf2 ...
- OpenCores注册步骤和成功提交
一 OpenCores 网站简介,这个是全世界最大的FPGA开源IP核网站.由于最近在学习USB2.0host control IP,所以想去网上下载相关的IP例程学习.通过搜索发现,有两个网站十分 ...
- BGP的四类属性详解
BGP的四类属性 公认必遵(Well-known mandatory) 要求所有运行BGP协议的设备都必须能识别,且在更新消息中必须包含. Origin(起源) 属性 用来标识路由信息的来源. 如果路 ...
- java继承:extends
继承:extends 1.java只支持单继承,不支持多继承 2.java支持多层继承(继承体系) 3.子类不能继承父类所有非私有的成员(成员方法和成员变量) 4.子类不能继承父类的构造方法,但是可以 ...
- 数据库连接(Database link)?
在一个用户下,可以获取到另外的用户下的表的数据,通常在跨数据库时使用. create database link link93 connect to scott identified by tiger ...