关于React-redux
Redux是React百口桶的重要一员,之前在知乎上也看到相似的发问:该怎样通俗易懂的明白Redux?
Redux是JavaScript的状况容器,Redux的观点简朴明了:
1. 运用中一切的状况都是以一个对象树的情势存储在一个单一的store中;
2. 当你想要转变运用的中的状况时,你就要dispatch一个action,这也是唯一的转变state的要领;
3. 经由过程编写reducer来保护状况,返回新的state,不直接修正本来数据;
为何会有Redux
在React中,数据的通报重要采纳state和props,props得由父级分发下来,而state是组件中可自行治理的状况,这意味着React并没有让数据回溯的才能,数据只能单向向下分发,或许自行内部处置惩罚,举一个简朴的例子,父组件能够运用props向子组件通报数据,子组件能够经由过程触发还调函数来转变父组件的状况,假如是那种没有嵌套关联的组件,该怎样来完成通讯呢?为了处理这个题目,Redux的要领就是将store放在根目录顶层组件中,一层层往下分发给各子组件,在子组件中举行挪用,Redux的作用是让状况变得越发可展望、而且更轻易治理。
Redux由Flux框架演化而来,但在Flux的基础上Redux转变了全部框架中某些角色的作用,比方在Flux中你能够具有多个store,每一个store存储本身对应的那部份状况,在Redux中,你只能保护一个store,存储了全部运用的一切状况,Redux更倾向于把store分发下去,dispatch action的时刻,reducer依据状况对象的key值再将store举行拆分,reducer能拿到store中对应的那一部份举行处置惩罚,Redux供应createStore、combineReducers、applyMiddleware等一系列要领来合营React-redux运用帮我们更好的对这个store举行治理,这里要详讲的是React-redux中的connect要领。
Store与视图层的绑定
Provider组件
想要把store绑定在视图层上,得用到React-redux中的两个主角:Provider和Connect,在api文档第一段话,作者说通常情况下你没法运用connect()去connect一个没有继续Provider的组件,也就是说假如你想在某个子组件中运用Redux保护的store数据,它必需是包裹在Provider中而且被connect过的组件,Provider的作用相似于供应一个大容器,将组件和Redux举行关联,在这个基础上,connect再举行store的通报。
Provider组件源码:
export function createProvider(storeKey = 'store', subKey) {
......
class Provider extends Component {
getChildContext() {
return { [storeKey]: this[storeKey], [subscriptionKey]: null }
}
constructor(props, context) {
super(props, context)
this[storeKey] = props.store;
}
render() {
return Children.only(this.props.children)
}
}
}
从源码中能够看到,作者用了React的Context,Context处理了一个React中很罕见的题目:当你的组件嵌套越来越深的时刻,context能让你父组件和别的里层组件之间的通讯变的更轻易,createProvider要领将返回一个Provider组件,该组件接收store和子组件,在Provider中定义了getChildContext要领来通报store,那末在子组件中应用contextTypes,你就可以应用context访问到父级组件通报的store数据了。
<Provider store>
Props
store:运用中唯一的状况store
children: 运用的子组件
例子:
<Provider store={store}>
<Router history={history}>
<Route path="/" component={App}>
<Route path="foo" component={Foo}/>
<Route path="bar" component={Bar}/>
</Route>
</Router>
</Provider>
connect要领
来看下connect函数究竟是怎样将store和组件联络在一起的,注重到api文档中有如许的一句话:
It does not modify the component class passed to it; instead, it returns a new, connected component class for you to use.
connenct并不会转变它“衔接”的组件,而是供应一个经由包裹的connect组件。 conenct接收4个参数,分别是mapStateToProps,mapDispatchToProps,mergeProps,options(运用时注重参数位置递次)。
connect([mapStateToProps], [mapDispatchToProps], [mergeProps], [options])
mapStateToProps(state, ownProps) 要领许可我们将store中的数据作为props绑定到组件中,只需store更新了就会挪用mapStateToProps要领,mapStateToProps返回的效果必需是object对象,该对象中的值将会更新到组件中,例子:
const mapStateToProps = (state) => {
return ({
count: state.counter.count
})
}
mapDispatchToProps(dispatch, [ownProps]) 第二个参数许可我们将action作为props绑定到组件中,mapDispatchToProps愿望你返回包括对应action的object对象,比方:
const mapDispatchToProps = (dispatch, ownProps) => {
return {
increase: (...args) => dispatch(actions.increase(...args)),
decrease: (...args) => dispatch(actions.decrease(...args))
}
}
export default connect(mapStateToProps, mapDispatchToProps)(yourComponent)
当你想对组件的render更新举行更好的掌握的时刻,它也支撑返回function要领,详细能够点击#279检察,例子:
const mapDispatchToProps = {
// increment: () => increment(1),
increase, // import increase function from action
decrease
}
mergeProps(stateProps, dispatchProps, ownProps) 该参数非必需,redux默许会帮你把更新保护一个新的props对象,相似挪用Object.assign({}, ownProps, stateProps, dispatchProps)。
而options是为了更好的定制化设置的一个参数,许可返回5个boolean、function的值,我日常平凡基本上没有接触到,想相识的能够参考api文档。
附参考文档:
(本身日常平凡写的一些总结,有误的处所迎接交换斧正)