react-Redux
基本使用
手写一个react-Redux
首先修改下index.js
创建reactRedux.js
由上图可知reactRedux主要有个Provider有个connect,connect连接store与组件 其实这里返回的是一个新的组件 hoc,这个新组建可以获取到Provider注入的store。Provider接受store props,组件内的所有组件都可共享store。这怎么做到的,我们是不是可以用context上下文达到祖孙之间的跳跃联系。
首先写Provider
- 这里首先创建一个context,然后后通过props注入,渲染的是this.props.children组件这里也就是。
对于connect
- 首先写第二个参数,右上图可知第二个参数是一个组件,并且在组件中获取到this.props,这里的props按正常引入react-redux,不写mapStateToProps和mapDispatchToProps的情况下打印结果只有一个dispatch
- 首先我们知道要写成这样,最终在组件中获取到this.props也就是dispatch
- 接下来就是mapStateToProps,mapStateToProps是一个回调函数他最终会返回state,既然是state那么就肯定是调用了store的getState获取值返回。进一步的写法如下:
-
至此在组件中获取到this.props也就是state的值以及dispatch
-
接下来就是mapDispatchToProps,mapStateToProps他有两种形式一种是对象一种是函数,要知道写了mapStateToProps对象形式那么在组件中获取到this.props就没有dispatch,因为它的写法就已经自调用dispatch了。它这里用了redux的bindActionCreators,下面我们会手写一个。
-
对于对象形式:
- 对于函数形式,就是调用函数传入dispatch作为参数执行,最终返回dispatch以及action方法:
- 现在点击加减是没有反应的 因为没有订阅更新 改造一下
- 至此我们首先的react-redux就完成啦
手写一个bindActionCreators
首先bindActionCreators的目的就是讲上面的统一转化为以下面的,无非就是遍历修改返回。