脚本宝典收集整理的这篇文章主要介绍了react七——react-redux,脚本宝典觉得挺不错的,现在分享给大家,也给大家做个参考。
react-redux
我们知道redux是:Store中维护了一个state,当我们view层dispatch了一个action,然后reducer根据这个action来更新state。
而react-redux呢,是react和redux的一个桥梁,也不是说没有他 react和redux不能使用,而是他做了一些封装,使得开发者能够更方便的使用redux
react-redux将组件分成两种:
1、容器组件(智能组件):容器组件负责做数据交互
2、UI组件(木偶组件):UI组件嵌套在容器组件里,只负责使用数据来显示数据
比起redux新增 两个模块
1、PRovider 组件来对Router进行包裹,并传入store,这样在内部组件的其他组件都可以共享store的数据 并且对其进行更改
在根组件中导入
import {Provider} from 'react-redux'
...
import store from './javascripts/redux/store'
ReactDOM.render(
<Provider store={store} >
<Router history={hashHistory}>
<Route path="/" component={App}>
<IndexRoute component={A}/>
<Route path="/a" component={A}></Route>
<Route path="/b" component={B}></Route>
</Route>
</Router>
</Provider>
,document.getElementById("app"))
2、connect 是将store中的数据通过props来显示在view层,并封装一个函数来响应用户操作时dispatch的action
import {connect} from 'react-redux'
import Actions from './redux/actionCreator'
...
const mapStateToProps = (@H_360_170@state) => {
return {
todos: getVisibleTodos(state.todos, state.visibilityFilter)
}
}
const mapDispatchToProps = (
dispatch,
ownProps
) => {
return {
onClick: () => {
dispatch({
type: 'SET_VISIBILITY_FILTER',
filter: ownProps.filter
});
}
};
}
export default connect(mapStateToProps,mapDispatchToProps)(A)
view层: <div>{this.props. todos}</div>
解析: connect接受的两个参数
-
mapStateToProps
是对store里的state和组件里的props对象形成映射关系,
每当store中的state有所更新,就会自动执行,重新计算,从而重新render
当然,他可以穿两个参数(state,ownProps) 这里如果容器组件里的ownprops改变,也会从新渲染
eg:
// 容器组件的代码
<FilterLink filter="SHOW_ALL">
All
</FilterLink>
const mapStateToProps = (state, ownProps) => {
return {
active: ownProps.filter === state.visibilityFilter
}
}
他可以接收state参数,并返回一个对象,这样你就可以在这里进行对数据的处理
eg:
const mapStateToProps = (state) => {
return {
todos: getVisibleTodos(state.todos, state.visibilityFilter)
}
}
-
mapDispatchToProps
这个函数或对象 是用来将用户的action传给store,他可以是一个函数,也可以是一个对象
函数:
const mapDispatchTopProps = (dispatch,ownProps) = > {
return {
onClick: () => {
dispatch({
type: 'ADD_NUM',
filter:ownProps.filter
})
}
}
}
这里,作为函数,他返回一个对象,对象里的键值对定义了ui组件的参数怎么发出action
对象:
const mapDispatchToProps = {
onClick: (filter) => {
type: 'ADD_NUM',
filter: filter
};
}
这里,是将上面的函数写成对象形式
以上是脚本宝典为你收集整理的react七——react-redux全部内容,希望文章能够帮你解决react七——react-redux所遇到的问题。
本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。