av喷水在线网,亚洲激情中文男女

Redux的設(shè)計(jì)思想：

Redux的工作流程：

首先，用戶發(fā)出Action

store.dispatch（action）;

然后，Store自動(dòng)調(diào)用Reducer，并且傳入兩個(gè)參數(shù)：當(dāng)前State和收到的Action。Reducer會(huì)返回新的State。

let nextState = todoapp（previousState,action）;

State一旦有變化，Store就會(huì)調(diào)用監(jiān)聽(tīng)函數(shù)。

store.subscribe（listener）

listener可以通過(guò)store.getState（）得到當(dāng)前狀態(tài)。如果使用的是React，這時(shí)可以觸發(fā)重新渲染View。

function listener（）{

let newState = store.getState（）;

compoent.setState（newState）;

}

Store收到Action以后，必須給出一個(gè)新的State，這樣View才會(huì)發(fā)生變化。這種State的計(jì)算過(guò)程叫做Reducer。

Reducer是一個(gè)函數(shù)，store.dispatch方法會(huì)觸發(fā) Reducer 的自動(dòng)執(zhí)行。為此，Store 需要知道 Reducer 函數(shù)，做法就是在生成 Store 的時(shí)候，將 Reducer 傳入createStore方法。

const defaultState = 0;

const reducer = （state = defaultState,action）=>{

switch（action.type）{

case ‘ADD’：

return state + action.payload；

default：

returnstate；

}

}

import { createStore } from 'redux';

const store=createStore（reducer）; ? ? ? ?//createStore用來(lái)生成Store

const state=store.getState（）; ? ? ?//對(duì)Store生成快照（即數(shù)據(jù)集合State）

store.dispatch（{ ? ? ? //store.dispatch是View發(fā)出Action的唯一方法

type:'ADD_TODO',

payload:'Learn Redux'

}）;

store.subscribe（listener）; ? ?//store.subscribe方法設(shè)置監(jiān)聽(tīng)函數(shù)，一旦State發(fā)生變化，就自動(dòng)執(zhí)行這個(gè)函數(shù)

重新整理（2016-12-9）

action-->reducer-->createStore

action:我們得用專門(mén)的處理函數(shù)，在各個(gè)數(shù)據(jù)來(lái)源里篩選出我們真正需要的數(shù)據(jù)，不把那些無(wú)關(guān)緊要的、甚至是臟的數(shù)據(jù)污染了我們的全局?jǐn)?shù)據(jù)對(duì)象。這種對(duì)數(shù)據(jù)來(lái)源做萃取工作的函數(shù)，就叫action。