redux原理实现

                                                                              redux原理实现

    在明白redux的原理之前，我们需要知道的就是redux的作用。redux其实就是根据react封装的一个库，其解决的问题就是处理异步数据。其基本思想就是将所有的数据与有关与数据的操作都放在store当中，那么为什么要这样做的原因是什么呢？相信大家在直接使用react的时候，会有两个很大的问题，第一就是数据之间的传递过程，一般的情况下我们通常采用的方式就是逐级传递，第二数据之间的影响问题，如果我们每个组件中都存放数据，而在实际的过程中，如果项目足够大，有时候很多的时候都不能够分清各个数据之间的关系，这种情况可能会使得我们开发项目遇到很多难以发现的问题。

对于redux，首先需要明白的是其核心的几个概念就是store.getState(),store.dispatch(),store.subscribe(),createStore,reducer,action与react-redux中的connect。他们之间的各个部分的功能主要是

  store.getState()其功能是将放在store的数据取出；

  store.dispatch()其功能是告诉store，用户这边发生了什么要求数据更加的行为；

  reducer其功能是去执行数据更改的行为；

  store.subscribe()其功能是检测数据是否发生变化；

  createStore()其接受reducer这个更改了数据之后state，然后再在createStore中执行各种操作，返回新的数据内容到store中；

  action其功能是用户请求的表达着，表达用户要进行什么样的操作。

明白了上面的内容后我们就来进行redux原理的正式实现

1.抽离store，将state与dispatch结合在一起，并且将其命名为store,然后再去构建一个函数createStore其目的就是专门用于生产state与dispatch

createStore里面有两个参数，第一个参数表示应用程序的状态，第二个是stateChanger用来描述会更具action来发生什么样子的变化

2.监控数据发生变化，在上面创建的createStore中第二个参数stateChanger就是去监控数据发生的变化，但是有个缺点就是之前写的方法需要手动的去更新，显然在实际的开发过程中，这种方式显然是不可取的。因此需要在stateChanger内部去添加这种制动更新的过程

要达到上面所说的自动更新还需要一个操作，那就是你要实时的去检测到这种变化，并且实时的更新数据，这个时候就使用store.subscript(listener)来实现这样的目的。

3.纯函数与共享性能提升

为什么会使用纯函数？在接触redux中的reducer中接触到的一个重要概念就是纯函数，为什么ruducer是一个纯函数呢，那就是因为我们想要达到一个效果，那就是接受一个state并且返回一个新的state，然后再将新的state存放到store当中。如果不采用纯函数，那样会造成的一个后果就是如果在你之前存入的数据中有可变的因素，那么在下一次你需要去使用里面的数据时，就会发生很多问题。

共享性能的提升，我们需要做到一个目的，那就是每次更新数据的时候，不需要去每次都去重新渲染整个页面的内容，只需要我们修改数据更改之后的数据。这样的好处是不言而喻的，能很明显的提高运行的速度，使最终的产品能够达到高效的过程。因此在对于stateChanger时，应使用下面的这种共享性能。

4.真正的reducer，其需要达到的目的是既能获取初始化数据的功能，又能生成更新后的数据，因此就有了下面的这段代码的产生。

5.最终版本的createStore，既然之前的reducer原理已经清楚明了，那么createStore就应该对reducer做出更加正确的反应。因而就得到了其最终的代码的原理

6.react-redux中connect原理的实现，其实connect的原理很简单，就是高级组件与context后而写成的，其功能是实现异步数据之间的传递。那么首先我们来实现一下只有一个mapStateToProps参数形式的connect，其代码如下

上面形式显然在实际的过程中是不可取的，因为此种方式去连接state是不准确的，因为...stateProps只反应有状态组件中的数据连接方式，其二是获取更新数据，每一次执行用于不同的操作时，要自动的去渲染并且连接到实时的数据。因此在这里我们采用下面的这种形式

显然这样的connect是不合理的，因为这里你连接的只是state，关于异步数据之间的操作并没有进行连接，因此在此时我们需要重新的再去更新connect的写法

上面的部分就是关于如何去使用react去实现redux的全部内容，讲到这里就非常的清楚react与redux之间的关系了，redux就是使用react封装好的一个库，在实际的开发中，我们不需要自己去实现这个过程，可以直接去调用redux，并且使用react-redux中的connect来进行项目的实际开发，这样的好处就是极大的节约了我们开发的时间，这种由官方封装好的库，在远远比我们自己去实现这个更加的强大。