一井厌、結(jié)構(gòu)
Redux主要由這幾部分構(gòu)成
1.Container（card.js）
2.Action (cardAction.js)
3.Reducer (cardReducer.js)
4.Saga (cardSaga.js)
這幾個文件分別起什么作用不贅述了症歇。
下面我直接進入實例：在前端獲取我們賬戶綁定的銀行卡信息膜蠢。（后臺到前端數(shù)據(jù)傳遞）
二、Action部分
根據(jù)功能要求旬蟋，我們在cardAction.js中這樣寫
//cardAction.js
export const SHOW_BANK_CARD_DATA = 'SHOW_BANK_CARD_DATA';
export const SHOW_BANK_CARD_DATA_SUCCESS = 'SHOW_BANK_CARD_DATA_SUCCESS';
export function getShowBankCardData(){
return {type: SHOW_BANK_CARD_DATA}
}
SHOW_BANK_CARD_DATA-------------動作：讀取銀行卡SHOW_BANK_CARD_DATA_SUCCESS------------動作：銀行卡被成功讀取
三褒墨、Saga部分
cardSaga.js的作用就是監(jiān)聽SHOW_BANK_CARD_DATA，當這個動作發(fā)生了淹魄，就調(diào)服務(wù)端的數(shù)據(jù)。
SHOW_BANK_CARD_DATA在cardSaga.js被調(diào)用堡距，
具體實現(xiàn)：
1.我們在cardSaga.js中設(shè)置watchGetAllBankCardData（）函數(shù)來監(jiān)聽SHOW_BANK_CARD_DATA動作甲锡。
2.監(jiān)聽到container發(fā)來的動作后，我們調(diào)用getAllBanks()函數(shù)羽戒，來訪問BankModel.allBanks這個API接口缤沦。
3.把從API接口傳來的后臺數(shù)據(jù)保存成json文件傳遞給SHOW_BANK_CARD_DATA_SUCCESS。
//cardSaga.js
function* getAllBanks(){
let json = yield call(BankModel.allBanks);
yield put({
type: actions.SHOW_BANK_CARD_DATA_SUCCESS,
json: json
})
}
export function* watchGetAllBankCardData(){
yield takeEvery(actions.SHOW_BANK_CARD_DATA, getAllBanks)
}
//存API的.js文件
export var BankModel = {
getBankName:(card_id)=>_api("GET", API("/api/v1/bank/searchbank"),{card_id}), // 根據(jù)銀行卡號半醉，返回銀行名
confirmAddBank:(card_id, cardholder, bank_name)=>_api("GET", API("/api/v1/bank/addcard"),{card_id, cardholder, bank_name}), // 添加銀行卡
allBanks:()=>_api("GET", API("/api/v1/bank/allbanks")), //獲取已綁定的所有銀行卡信息
deleteOneInfo: (id)=>_api("GET", API("/api/v1/bank/deleteoneinfo"),{id}), //刪除一條銀行卡信息
chooseCashoutCard: (id)=>_api("GET", API("/api/v1/bank/choosecashoutcard"),{id})
};
四疚俱、By the way
這里有個問題，container怎么發(fā)出的SHOW_BANK_CARD_DATA這個動作的呢缩多。
//card.js
class ShowBankCardContainer extends React.Component{
constructor(props){
super(props);
this.props.actions.getShowBankCardData();
}
從代碼中我們能看出呆奕，組件被構(gòu)造出來之后我們調(diào)用了cardAction.js中傳來的函數(shù)this.props.actions.getShowBankCardData()來執(zhí)行SHOW_BANK_CARD_DATA動作。
除了這種方式衬吆，我們還能把動作和前端綁起來梁钾，比如按下某個按鈕，就執(zhí)行某個動作逊抡。例如我們的DELETE_ONE_BANK_CARD動作就是在按下按鈕后執(zhí)行的姆泻。
delete(id, index) {
this.props.actions.deleteBankCard(id, index);
}
<button onClick={this.delete.bind(this,item.id, index)}>
五、Reducer部分
我們拿到后臺傳來的json后冒嫡，通過cardReducer.js進行處理拇勃。
1.我們先初始化allcards這個state對象，并用status,msg,data這三個子state來接收json孝凌。這三個state設(shè)置的很有講究：
status為0的時候方咆，說明與后臺訪問成功（這是后端程序員規(guī)定的），返回status和data蟀架。
status非0的時候瓣赂，說明與后臺訪問失斢苌А（這是后端程序員規(guī)定的），返回status和msg煌集。
這說明data攜帶的是json傳來的數(shù)據(jù)妓肢，而msg是json傳來的訪問失敗錯誤信息，status攜帶的是指示（本例中為0 / 1）苫纤。
//cardReducer.js
const initialState = {
allcards: {
status: 1,
msg: '',
data: [], // 所有綁定的銀行卡信息
},
export function showBankCardReducer(state=initialState, action){
switch(action.type){
case showBankCardActions.SHOW_BANK_CARD_DATA_SUCCESS:
let allcards_status = action.json.status;
if (allcards_status !== 0){
let allcards = {status: allcards_status,msg:action.json.msg};
return Object.assign({}, state, {allcards})
}else{
let allcards = {status: allcards_status, data: action.json.data};
return Object.assign({}, state, {allcards})
}
default:
return state
}
}
2.我們把allcards和state的值傳給了{}碉钠，而不是把allcards傳給state，為了不改變state本身的值方面。這點體現(xiàn)了reducer作為一個純函數(shù)放钦，每次輸出的值不受先前的值影響色徘。
經(jīng)過reducer處理后恭金，我們在container即card.js中拿到這些state
//cardReducer.js
return Object.assign({}, state, {allcards})
//card.js
function mapStateToProps(state){
const allcards = state.showBankCardReducer.allcards;
return {
allcards
}
}
3.這樣我們就能用this.props.allcards.data把allcards的數(shù)據(jù)傳到前端了
//card.js
<p>this.props.allcards.data</p>
結(jié)語：麻雀雖小，五臟俱全褂策。本文沒涉及store以及Action,Reducer綁定Container横腿，因為那太簡單了。
