redux 实现原理

一、为何要使用redux?

咱们都知道在React中，数据在组件中是单项绑定的。父组件向子组件传递数据能够经过props，可是兄弟组件之间传递数据就比较麻烦。redux 就能够解决这一问题。

二、redux 的设计理念

redux 是将整个应用的state存储在一个公共的store文件当中，组件能够经过分发（dispatch）一个动做或者是行为（action）给这个公用的store，而不是直接去通知其余组件，组件内部经过订阅store中的状态state来刷新本身的视图。这里我我的对的理解是，在咱们的组件内部有个相似于监听器的东西，一旦监听到store中的值发生了改变就会刷新咱们的页面。

三、redux 三大原则

• 惟一数据源

整个应用的数据存储在一个统一的状态树中，也就是咱们前面所说的公共的store 文件。在组件都会从这个store中获取数据。

• 保持只读状态

state是只读的，惟一改变state的方法就是触发action，action是一个用于描述以发生时间的普通对象。

• 数据改变只能经过纯函数来执行

使用纯函数来执行修改，为了描述action如何改变state的，你须要编写reducers。

四、redux原理详细解析

下面详细介绍一下redux的工做原理

4.1 Store

经过上面的内容，我想你们应该对redux的用途或者说它是用来干什么的，能帮助开发者解决什么问题大概了有了一些了解，咱们说了redux是为了解决react中数据单向流动的问题，说到数据咱们上面页提到了，redux中的数据是存储在一个状态树store中，因此说：

• store就是保存数据的地方，你能够把它当作一个数据，并且整个应用能有一个store。
• redux提供了createStore这个函数，用来生成store。

import {createStore} from 'redux'
    const store=createStore(fn);
复制代码

4.2 State

state就是store中存储的数据，store里面能够拥有多个state，Redux规定一个state对应一个View,只要state相同，view就是同样的，反过来也是同样的，能够经过store.getState( )获取。

import {createStore} from 'redux'
    const store=createStore(fn);
    const state=store.getState()
复制代码

4.3 Action

state的改变会致使View的变化，上面咱们说过redux中不能直接经过this.setState()修改state，为了使state发生改变，在redux中提供了一个对象Action,咱们能够理解为一个行为或者是动做，也就是说这个action能够改变state，并且也是改变state的惟一方法。

const action={
      type:'ADD_TODO', //action名称，必须存在
      payload:'redux'
    }
复制代码

4.4 store.dispatch( )

store.dispatch( )是view发出Action的惟一办法，这里解释一下，在view中，用户触发一个行为或者简单理解点击某一个按钮，这时候若是须要修改state值，就须要触发action，而store.dispatch接收一个Action做为参数，将它发送给store通知store来改变state。

const action = {
        type:'ADD_TODO',
        payload:'redux'
    };
    store.dispatch(action);
复制代码

4.5 Reducer

Store收到Action之后，必须给出一个新的state，这样view才会发生变化。这种state的计算过程就叫作Reducer。 Reducer是一个纯函数，他接收Action和当前state做为参数，返回一个新的state。

const reducer =(state,action)=>{
      switch(action.type){
        case ADD_TODO:
            return newstate;
        default return state
      }
    }
复制代码

至此redux的原理就介绍完了，若是还有不一样理解的小伙伴们还请下发留言。若是有写的很差的地方还请多多指教。我会继续更新有关前端的技术文章的。