React-Redux原理探索

41 阅读2分钟

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的目的就是讲上面的统一转化为以下面的,无非就是遍历修改返回。