使用Redux管理React数据流要点浅析
在图中,使用Redux管理React数据流的过程如图所示,Store作为唯一的state树,管理所有组件的state。组件所有的行为通过Actions来触发,然后Action更新Store中的state,Store根据state的变化同步更新React视图组件。
那么Store是如何和视图绑定的呢?
在主入口文件index.js中,通过Provider标签把Store和视图绑定:
<Provider store={store}>
//项目代码
</Provider>
在项目中,Store是如何具体管理State呢?实际上是通过Reducers根据不同的Action.type来更新不同的state,即(previousState,action) => newState。最后利用Redux提供的函数combineReducers将所有的Reducer进行合并,更新整个State树。
在Redux项目中,利用Container容器组件作为桥梁,将React组件和Redux管理的数据流联系起来。Container通过connect函数将Redux的state和action转化成展示组件即React组件所需的Props。
//将state.data绑定到相应的React组件的Props的data
function mapStateToProps(state){
return {
data:state.data
}
}
//将actions的所有方法绑定到相应的React组件的Props上
function mapDispatchToProps(dispatch){
return bindActionCreators(actions,dispatch)
}
//通过react-redux提供的connect方法将我们需要的state中的数据和actions中的方法绑定到相应的React组件的Props上
export default connect(mapStateToProps,mapDispatchToProps)(reactComponent)
通过上面的分析,我们总结为一幅更详细的图示:
注册Store:
//applyMiddleware可以包装Store的dispatch,thunk的作用是使action创建函数可以返回一个function替代action对象
const createStoreWithMiddleware = applyMiddleware(thunk)(createStore)
... ...
const store = createStoreWithMiddleware(reducer,initialState)
这里可能有同学会有疑问,React的state和Redux所说的state是同一回事吗?下面我们简要分析一下:
首先,React组件的state和props定义如下:
state-只表示一些临时的、内部的状态数据,例如窗口的打开或关闭状态。
props-通常存储一些方法,一些可能需要库存的长期数据和一些需要传递的共享数据。
然后,Redux和React基本上只有2种联系:
要么React从Redux的state中读取数据,要么React通过dispatch分发action到Redux,Redux的reducer来返回一个新的state。
结论是Redux的state存放的是全局的长期数据,也就是对应的React组件的Props数据,而组件React的state应该是临时的内部状态数据,所以这两个state没有半毛钱关系。
下面我们总结一下Redux的三大原则和数据流的管理:
Redux三大原则:
1、单一数据源,这个应用的state被存储在一棵object tree中,并且这个object tree只存在于唯一的Store中。
2、state是只读的,唯一改变state的方法就是触发action,action是一个用于描述已发生事件的普通对象。
3、使用纯函数来执行修改,为了描述action如何改变state tree,需要编写reducer。
Redux数据流的管理:
1、action:把数据传递到Store,唯一数据来源。
2、reducer:action只描述有事情发生,reducer指明如何更新state,即设计state结构和action处理。
3、Store:把action和reducer联系到一起,负责维持、获取和更新state。
4、生命周期:数据流严格且单向
调用Store.dispatch(action)->Store调用传入的reducer函数,Store会把两个参数传入reducer:当前的state树和action->根reducer将多个子reducer输出合并成一个单一的state树->Store保存了根reducer,并返回完整的state树。
使用Redux管理React数据流要点浅析的更多相关文章
- Redux 管理React Native数据
现在让我们看看大致的流程: React 可以触发 Action,比如按钮点击按钮. Action 是对象,包含一个类型以及相关的数据,通过 Store 的 dispatch() 函数发送到 Store ...
- 使用Redux管理你的React应用
因为redux和react的版本更新的比较频繁,博客园这里用的redux版本是1.0.1,如果你关心最新版本的使用技巧,欢迎来我的Github查看(https://github.com/matthew ...
- Redux管理你的React应用
使用Redux管理你的React应用 因为redux和react的版本更新的比较频繁,博客园这里用的redux版本是1.0.1,如果你关心最新版本的使用技巧,欢迎来我的Github查看(https ...
- Redux 和React 结合
当Redux 和React 相接合,就是使用Redux进行状态管理,使用React 开发页面UI.相比传统的html, 使用React 开发页面,确实带来了很多好处,组件化,代码复用,但是和Redux ...
- angular8 + redux 管理状态
1. angular8.1.1 ----- package.json { "name": "angular-demo", "version" ...
- redux在react项目中的应用
今天想跟大家分享一下redux在react项目中的简单使用 1 1.redux使用相关的安装 yarn add redux yarn add react-redux(连接react和redux) 2. ...
- 浅谈React数据流管理
引言:为什么数据流管理如此重要?react的核心思想就是:UI=render(data),data就是我们说的数据流,render是react提供的纯函数,所以用户界面的展示完全取决于数据层.这篇文章 ...
- 使用Redux管理你的React应用(转载)
本文转载自: http://www.cnblogs.com/matthewsun/p/4773646.html
- 前端(十):使用redux管理数据
react本身能够完成动态数据的监听和更新,如果不是必要可以不适用redux. 安装redux: cnpm install redux --save,或者yarn add redux. 一.react ...
随机推荐
- 修剪草坪 HYSBZ - 2442
在一年前赢得了小镇的最佳草坪比赛后,FJ变得很懒,再也没有修剪过草坪.现在,新一轮的最佳草坪比赛又开始了,FJ希望能够再次夺冠. 然而,FJ的草坪非常脏乱,因此,FJ只能够让他的奶牛来完成这项工作.F ...
- PhpStorm 10.0.1破解激活步骤
1.下载破解补丁 链接:https://pan.baidu.com/s/1S4JVKiaFnCZG01MpDPaAAA 密码:c6x6 放到phpstorm安装目录下的lib文件夹下: C:\soft ...
- JDK8中的HashMap源码
背景 很久以前看过源码,但是猛一看总感觉挺难的,很少看下去.当时总感觉是水平不到.工作中也遇到一些想看源码的地方,但是遇到写的复杂些的心里就打退堂鼓了. 最近在接手同事的代码时,有一些很长的pytho ...
- Codeforces #536 A..D 题解
foreword ummm... 开始前几个小时被朋友拉来打了这一场,总体海星,题目体验极佳,很符合口味,稍微有点点简单了不知道是不是因为是 New Year Round,很快就打到了 D,但是题目阅 ...
- 多元线性回归算法python实现(非常经典)
对于多元线性回归算法,它对于数据集具有较好的可解释性,我们可以对比不过特征参数的输出系数的大小来判断它对数据的影响权重,进而对其中隐含的参数进行扩展和收集,提高整体训练数据的准确性.整体实现代码如下所 ...
- 记一次菜鸡的低级折腾--WordPress get Webshell(后台文件编辑插马)
挺简单的一个测试站,开始思路错了,一直去网上找WordPress的漏洞,看有没有什么能利用的,未果,因为这个测试站有些地方并不完善,有的漏洞利用不了,菜鸡的我连弱口令都没猜对,没知识就是这么悲哀. 下 ...
- 【QSBOJ】组成三位数
题目描述 将1,2,…,9共9个数分成三组,分别组成三个三位数,且使这三个三位数构成1:2:3的比例,试求出所有满足条件的三个三位数. 例如:三个三位数192,384,576满足以上条件. 输出 输出 ...
- shiro缓存配置
realm的缓存 方法一: 在securityManager配置中添加cacheManager配置项,会注入到realm中. 方法二:在realm中配置. realm本身实现了CacheManager ...
- mac安装扩展出现grep: /usr/include/php/main/php.h
在Mac下执行 sudo phpize时提示: grep: /usr/include/php/main/php.h: No such file or directorygrep: /usr/inclu ...
- synchronized和锁(ReentrantLock) 区别
synchronized和锁(ReentrantLock) 区别 java的两种同步方式, Synchronized与ReentrantLock的区别 并发(一):理解可重入锁 可重入锁和不可重入锁 ...