Redux实现流程

好多人对Redux 实现流程都感觉很痛苦 今天我们来简单的了解一下吧

首先来看看思路图吧！

http://www.ruanyifeng.com/blogimg/asset/2016/bg2016091802.jpg

看到这里估计会有很多人都看不明白 尤其是一些刚学习redux 的一些朋友

其实万事开头难，你要找到切入点 有了切入点你就成功了50%

让我们来先了解一下redux实现原理吧 

  redux 原理

1. 组件视图 通过 事件 发送 dispatch action  

2. store 接收到 action , 把action和 oldState 当做参数发送给 reducers

3. reducers 接收 action和 oldState  通过计算返回新的 newState 给 store 

4. store 会把 state 重新的渲染到 组件内视图  

如果看到这里你还不明白

来吧！！

咱们继续

先了解一下每个api的作用

 Store  中间基站  负责调配  (getState  dispatch   subscribe )

Store 就是保存数据的地方，你可以把它看成一个容器。整个应用只能有一个 Store

Redux 提供createStore这个函数，用来生成 Store

 

 state 组件的状态 对象 

Store对象包含所有数据。如果想得到某个时点的数据，就要对 Store 生成快照。这种时点的数据集合，就叫做 State

 

数据===> store  ===> store.getState()  ===> state 

 

State 对应一个 View。只要 State 相同，View 就相同。你知道 State，就知道 View 是什么样

 

state 和 view 是一一对应的

 

 action    store 发出的通知 提示我要改变 state state 就会去修改视图 view 

Action 就是 View 发出的通知，表示 State 应该要发生变化了

Action 是一个对象。其中的type属性是必须的 payload 载荷 参数

 

const action = {type:"ChangeMsg" ,payload }

 

 Action Creator  action 升级写法  用函数来书写action 

 

()=>({type:"ChangeMsg" ,payload })  

 

function addSome(){

    return {

        type:"addSome"

    }

}

 

 store.dispatch()是 View 发出 Action 的唯一方法。 

 reducer    类似 mutation 纯函数 只负责计算修改 state 

Reducer 是一个函数，它接受 Action 和当前 State 作为参数，返回一个新的 State

 

 

终结： 在平时项目中也可实现redux 的作用

你可以按照以下步骤完成

先 写 action 

再 写 reducer 

最后去 发送 action 

完成  done