目前redux流行的解决方法包括了redux、react-redux、redux-thunk等等。以后会总体来说，现在先说一下，纯redux数据流是如何实现的。理解了这个数据流，就基本理解原生redux是如何实现的了，内部流程是什么<p>
下面这个图是redux的内部流程，我结合这个图说一下。（个人理解，说错了，欢迎交流）<p>
Paste_Image.png
action
action是一个单纯包含了{type}的对象，type是一个常量用来表示动作类型的。Action需要<code>store.dispath()</code>来来发送信息。例如下面这个例子：
{
type:"one",
text:"one_text"
}
但是通常使用action creator函数来创建action对象，这样具有灵活性，可以提供更多种的配置。
function action_text(text){
return {
type:"one",
text
}
}
触发一个动作只需要调用<code>dispath (action_text(text))</code>
Reducer
reducer的作用是用来根据具体情况来更改action对应的state树的。reducer会接受两个参数，第一个是<code>state</code>，初始化的<code>state</code>；第二个是<code>action</code>。返回的是一个新的state，这个state可以通过监听来重新渲染整个UI，这部分在后面会讲到。<code>(oldState,action)=>newState</code>
const initialState={
a:"A",
b:"B"
}
function someApp(state = initialState, action) {
switch (action.type) {
case 'CHANGE_A': return { ...state, a: 'Modified a' };
case 'CHANGE_B': return { ...state, b: action.payload };
default: return state
}
Store
现在有了 Action 和 Reducer，Store 的作用就是连接这两者，Store 的作用有这么几个：
<ul>
<li>Hold 住整个应用的 State 状态树
<li>提供一个 getState() 方法获取 State
<li>提供一个 dispatch() 方法发送 action 更改 State
<li>提供一个 subscribe() 方法注册回调函数监听 State 的更改
</ul>
具体案例以后具体分析。
数据流，这个最重要的
看上面的图，可以看到数据流发生改变的时候，数据是如何流动的。
单向数据流调用<code> store.dispatch(action) -> reducer(state, action) -> store.getState()</code>
（1）调用sote.dispath(action)（这里的action和上面提到的action不是一个概念，这个是一个纯的对象，上面是一个action creator）
{ type: 'LIKE_ARTICLE', ID: 1 }
你可以在任何地方调用 store.dispatch(action)，比如组件内部，Ajax 回调函数里面等等。
（2）Action 会触发给 Store 指定的 rootreducer
rootreducer会返回一个完整的状态树，state状态树上的各个值都可以由对应的reducer来更新。
（3）store会保存状态树
更新完state后，新的 State 会替代旧的 State。然后可以添加监听函数<code>store.subscribe(listener)</code>在回调函数里面可以通过<code>store.getState()</code>来获取新的state。这样就能更新整个UI。只要调用<code>dispath</code>，state就会根据<code>reducer</code>对应更新，进而触发监听函数<code>subscribe</code>，然后触发回调函数渲染UI。
网友评论