深入理解react-redux
来源:互联网 发布:网络接单平台 编辑:程序博客网 时间:2024/06/05 09:16
一、react-redux
作用
react-redux
的作用就是将react
与redux
连接起来,将redux
中的store
传递到react
组件中
二、关于展示组件与容器组件的对比
总结一点:展示组件就是
react
,容器组件是redux
连接react
的
三、react-redux
的使用
1、安装
npm install react-redux --save
2、
react-redux
中使用到的方法1、
Provider
实质上就是将store
传递到容器组件,容器组件又传递数据到展示组件<Provider store={store}>...容器组件</Provider>
2、
connect
将容器组件连接到展示组件中,进行数据的传递//connect是一个柯里化函数 export default connect(xxx)(展示组件)
3、一般我们利用
redux
开发react
项目常见的项目目录
四、深入理解connect
1、
connect
源码connect函数传递三个参数,实际开发中一般都是传入前2个参数
...return function connect(mapStateToProps, mapDispatchToProps, mergeProps) {...}...
- 1、
mapStateToProps
是一个(函数类型),接收一个完整的redux
状态树作为参数,返回当前展示组件需要的状态树,返回的key
会当做props
传递到展示组件。 - 2、
mapDispatchToProps
是一个(对象或者函数类型),接收一个完整的redux
的dispatch
方法作为参数,返回当前组件相关部分的或者全部的的action
- 3、
mergeProps
是一个(函数类型),如果指定这个函数,分别获得mapStateToProps
、mapDispatchToProps
返回值以及当前组件的props
作为参数
- 1、
2、
mapStateToProps(state,[ownProps])
的解析第一个参数是必填的,第二个参数是选填的
- 1、
state
返回的参数作为props
传递到展示组件 - 2、
ownProps
表示当前容器组件中的属性
- 1、
3、关于
mapStateToProps
的代码import {connect} from 'react-redux';import * as ActionCreators from './../actions';import Counter from './../components/Counter';export default connect( /** * 解析:mapStateToProps(state),返回一个counter以props传递给Counter组件中 * 关于state.counter1的解析,请参考下面的反向查找流程图 */ (state) =>({counter:state.counter1}), ActionCreators)(Counter);
五、关于connect
的写法
- 1、
mapStateToProps
是函数mapDispatchToProps
是对象(代码见上面) 2、
mapStateToProps
是函数mapDispatchToProps
也是函数import {connect} from 'react-redux';import Counter from './../components/Counter';import {onIncrement,onDecrement,incrementIfOdd,incrementAsync} from './../actions';export default connect( state =>({counter:state.counter1}), dispatch =>({ onIncrement:()=>dispatch(onIncrement()) }))(Counter);
3、直接使用装饰器(不需要单独创建容器组件) 配置ES7的开发环境
import {connect} from 'react-redux';import React, {Component} from 'react';import * as ActionCreators from './../actions';@connect( state =>({counter:state.counter1}), ActionCreators)export default class Counter extends Component { constructor(props) { super(props); } render() { const {counter,onIncrement,onDecrement,incrementIfOdd,incrementAsync} = this.props; .... }
六、代码下载地址demo
阅读全文
0 0
- 深入理解React-Redux
- 深入理解React、Redux
- 深入理解React、Redux
- 深入理解react-redux
- React、Redux、React-Redux的一些理解
- react-redux的理解
- react+redux+react-redux
- react-redux的工作流程理解
- redux react-redux
- Redux(三: React-Redux)
- react-redux
- React + Redux
- React&Redux
- react-redux
- React Redux
- react-redux
- react-redux
- React-Redux
- MongoDB mapreduce 使用
- 二叉树的C++实现
- linux下 socket tcp Server c语言编写(分别实现单进程,多进程,多线程)
- [USACO3.3]骑马修栅栏 Riding the Fences
- adb查看SharedPreferences出现Permission denied不root解决方法
- 深入理解react-redux
- POI excel 设置样式
- 关于junit断言
- 软件系统概要设计的三大要素
- 将两个并列的元素的属性设为inline-block的影响
- 485. Max Consecutive Ones
- 【dp】51nod 1154 回文串划分
- 如何实现js的map和filter函数
- 面对对象基础要点