react-redex之connect和Provider组件
来源:互联网 发布:国内旅游租房软件 编辑:程序博客网 时间:2024/05/21 07:59
在redux的学习中,个人觉得connect()函数是redux中的难点。所以想结合Provider 组件来总结一下。(如果大家对redux还没有一个整体的了解,还不建议直接看下去)
1、react-redux的状态管理方式是什么?
在react-redux中,使用Provider注入store,store是我们创建的用于状态管理的容器。使用方式就是:
js/index.js
**import React, { Component } from 'react';import PropTypes from 'prop-types';import { render } from 'react-dom';import { createStore } from 'redux';import { Provider } from 'react-redux';import App from '../containers/App';import todoApp from './reducers';let store = createStore(todoApp);console.log('store',store);render(<Provider store={store}><App /></Provider>,document.getElementById('root'));**
在这里,引入createStore创建store,然后在Provider组件的属性中注入store,其中Provider是react-redux提供的一个组件。
注入Provider组件中,我们就能在它的子组件中获取我们注入的东西,但是这个获取的方式就是通过connect()函数。
一个组件的状态的改变,必须connect之后才能进行状态管理。我看到有人这么形容connect,非常形象—(利用Provider组件把store注入进来,我们只能通过store来进行数据管理,任何组件如果想要进行交互,必须connect进来这个容器中,这个connect提供了方法让你传递数据和dispatch),connect的使用方式就是:
containers/App.js
import React, { Component } from 'react';import PropTypes from 'prop-types';import { connect } from 'react-redux';import { addTodo, completeTodo, setVisibilityFilter, VisibilityFilters, increase, decrease } from '../js/actions';import { bindActionCreators } from 'redux';class App extends Component { render() { const {value, increase, decrease} = this.props; return ( <div> <p>计数:{value}次</p> <button onClick={increase}>increase</button> <button onClick={decrease}>decrease</button> </div> ) }}const mapStateToProps = (state)=>{ console.log('state',state); return { todos: state.todos, visibilityFilter: state.visibilityFilter, value: state.value }}const mapDispatchToProps = (dispatch, ownProps) => { return bindActionCreators({ increase: () => dispatch(increase()), decrease: () => dispatch(decrease()) })}export default connect(mapStateToProps,mapDispatchToProps)(App);
这里的App就是定义的UI组件,然后export default connect()(App)就实现了对接。
对接之后就要进行数据传递和dispatch,所以看到了connect的两个参数mapStateToProps和mapDispatchToProps。
这是两个函数,承载不同的功能,接下来给大家介绍。
2、connect函数的第一个参数:mapStateToProps(state,ownProps)
这个函数的作用就是把你需要的数据转换为props提供给你的ui组件使用。返回的是一个对象。
state就是提供给我们的默认数据,用来渲染UI组件的数据。console.log(state)发现state是一个对象。
这个对象中的数据就是我们用于渲染界面使用的东西。
ownerProps这个参数主要是组件自己的数据。
3、connect函数的第二个参数mapDispatchToProps(dispatch,ownProps)
和第一个传入的state不同的是,第二个用作参数的函数传入的是一个dispatch,用于把UI组件发生的action动作dispatch出去。它返回的也是一个对象。
const mapDispatchToProps = (dispatch, ownProps) => { return bindActionCreators({ increase: () => dispatch(increase()), decrease: () => dispatch(decrease()) })}
完!
完整的demo的github地址connect-demo
- react-redex之connect和Provider组件
- react-redux提供了connect和Provider有什么作用?
- React×Redux——react-redux库connect()方法与Provider组件
- React×Redux——react-redux库connect()方法与Provider组件
- (十)Redux:官方react-redux的初步使用(Provider组件、connect函数)
- React之路--组件和自定义组件
- React之智能组件和木偶组件
- React-Native组件之 Navigator和NavigatorIOS
- 4.React中文之组件和属性
- Redex
- android组件之Content Provider
- 四大组件之Content Provider
- Android组件之Content Provider
- react -redux之provider作用小析
- React之组件嵌套
- React之组件
- React Native组件之ScrollView 和 StatusBar和TabBarIos
- React Native组件之Switch和Picker和Slide
- Spring中 @Autowired标签与 @Resource标签 的区别
- 多线程学习笔记(六)之锁对象Lock
- C++实验7——最大公约数和最小公倍数
- 史上最简单的 MySQL 教程(八)「校对集问题」
- 腾讯云 讲解 javascriptcore
- react-redex之connect和Provider组件
- 【DP】洛谷 P1063 能量项链
- SESSION入库的实现
- JAVA获取服务器路径的方法
- Caffe学习系列(3):视觉层(Vision Layers)及参数
- iOS 使用高德地图SDK 加载谷歌地图切片
- JDK动态代理实现原理
- 外部中断实验-M3
- 大数据IMF传奇行动绝密课程第117课:Spark Streaming性能优化:如何最大程度的确保Spark Cluster和Kafka连接的稳定性