Redux快速上手
Redux
Redux is a predictable state container for JavaScript apps.
Redux是一个js应用的可预测状态容器。
Redux是根绝Flux改进的一个状态管理器,主要用于处理跨层级组件通信的问题。
Redux有三大原则:
- 整个应用的state被存储在单个的对象树中(store);
- 状态是只读的,只能通过actions改变状态;
- 使用纯函数进行更改状态(reducer)。
Store
Store主要有四个方法:
-
getState()
:获取当前的state -
dispatch(action)
:发出一个action -
subscribe(listener)
:添加一个监听器 -
createStore(reducer, [preloadedState], [enhancer])
:创建store
在创建一个Store时可以添加中间件,如redux-thunk
用于异步获取数据,redux-devtools-extension
浏览器调试工具等。
redux-thunk和redux-devtools-extension使用:
import { composeWithDevTools } from 'redux-devtools-extension'
import thunk from 'redux-thunk'
const middleware = [ thunk ]
if (process.env.NODE_ENV !== 'production') {
middleware.push(createLogger())
}
const store = createStore(
reducer,
composeWithDevTools(applyMiddleware(...middleware))
)
在项目中添加redux-devtools-extension
后再开发者调试工具中就会多出一个redux
的选项。
redux-devtools-extension
Reducer
reducer是一个纯函数,大致如下:
(preState, action) => newState
禁止在reducer中修改传入参数;禁止执行有副作用的操作;禁止调用非纯函数。
React的思想是将页面抽象为一个个组件,当两个组件是相互独立时,应该为每个组件创建单独的reducer,最后使用combineReducers()
将多个reducer合并。
react-redux
react-redux只有两个API。
react使用react-redux
来绑定redux。将根组件包裹在<Provider>
中,将store作为props传入,使项目中的任何组件都可以使用store。然后使用connect()
函数真正的连接react的组件和redux的store。
export default connect(mapStateToProps)(App)
connect有四个参数:
- mapStateToProps
- mapDispatchToProps
- mergeProps
- options
1、mapStateToProps(atate, ownProps)
允许我们将store中的数据作为props绑定到组件上。
第一个参数为Redux的store,第二个参数为App组件自身的参数。当store或ownProps发生变化时,mapStateToProps()函数会被调用,得出一个新的state,传递给App组件。
2、mapDispatchToProps(dispatch, ownProps)
是将action作为props绑定到组件上。
Redux本身提供了bindActionCreators
函数,将action包装成直接可被调用的函数,即调用该函数就会触发dispatch。
3、mergeProps(stateProps, dispatchProps, ownProps)
不管是stateProps还是dispatchProps,都需要和ownProps merge之后才会赋值给App,该函数实现了这个功能。但不传递该参数也可以,connect会使用Object.assign
方法代替。
4、options
总结
redux的工作流程:
1、页面产生交互性行为,发出action;
store.dispatch(action)
2、Store调用Reducer;
var nextState = todoApp(preState, action)
3、State一旦有变化,Store就会调用监听函数。
store.subscribe(listener)
4、listener通过store.getState()
获取状态,React可以触发重新渲染视图。
function listener() {
let newState = store.getState();
component.setState(newState)
}
redux工作流程- END -
- CLR 4.0 安全模型
- 应用工具 .NET Portability Analyzer 分析迁移dotnet core
- 使用无觅相关文章插件一定要删除的代码
- 管理混合云环境的5个要点
- Team Foundation Server 2010 – Basic Installation
- 富文本编辑器的一键排版功能
- 通过ProGet搭建一个内部的Nuget服务器
- Mercury Editor学习心得
- 无意禁止使用:英伟达官方回应GeForce软件条款更改
- Ext JS 6 新特性和工具
- 为你的WordPress 博客文章页面增加多彩排版条
- java: web应用中不经意的内存泄露
- java: web应用中不经意的内存泄露
- velocity模板引擎学习(4)-在standalone的java application中使用velocity及velocity-tools
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- 从源码看 Jetpack(6)-ViewModel源码详解
- linux配置c++11编译环境
- Java 多线程编程(聊聊线程池)
- Java 多线程编程(“锁”事碎碎念)
- Spring Cloud Alibaba技术栈(下)
- Electron安装过程深入解析(读完此文解决Electron安装失败导致的无法启动,无法打包的问题)
- Kafka中副本机制的设计和原理
- Cocoapods更新出错
- 用 Wolfram 语言映射美国的山火
- Mathematica在中学数学教与学中的应用
- 总结一些ES不常用的filter
- 如何将炫酷的报表直接截图发送邮件——在Superset 0.37使用Schedule Email功能
- Kettle构建Hadoop ETL实践(五):数据抽取
- Kafka监控必备——Kafka-Eagle 2.0.2正式发布
- iOS Universal link 入门指南