ReactNative Flux框架使用 进阶篇

Flux框架应用—进阶

三、登录功能封装

1. 创建Api.js文件

封装POST请求方法

function _doPost(url, formData) {
return new Promise((resolve, reject) => {
fetch(url, {
method: 'POST',
headers: {

},
body: formData
})
.then((response)=>{
if(response.ok){
return response.json();
}
}).then((responseJson)=>{
resolve(responseJson);
}).catch((error)=>{
reject(error);
});
});
}

方法说明：

_doPost方法返回Promise对象

封装login方法

export function doUserLogin(loginData) {
let loginForm = new FormData();
loginForm.append("user", loginData.user);
loginForm.append("pw", loginData.pw);

dispatchAsync(_doPost('url', loginForm), {
request: ActionTypes.USER_LOGIN,
success: ActionTypes.USER_LOGIN_SUCCESS,
failure: ActionTypes.USER_LOGIN_ERROR
}, loginData);
}

2. AppDispatcher.js文件中增加新方法

export function dispatchAsync(promise, types, action = {}) {
const { request, success, failure } = types;

dispatch(request, action);
promise.then(
response => dispatch(success, { ...action, response }),
error => dispatch(failure, { ...action, error })
);
}

方法说明：

（1）dispatch(request, action); 分发网络请求类型的action

（2）promise.then(); 分发网络请求返回结果的action

3、创建Login.js文件

componentDidMount()生命周期中接收dispatch分发的action

register(action => {
switch(action.type) {
case 'USER_LOGIN':
break;
case 'USER_LOGIN_SUCCESS':
if(action.response.status == 1) {
// {type: ActionConst.RESET} 解决Home时点击返回键，退回到登录页面的问题
Actions.tabbar({type: ActionConst.RESET});
} else {
// TODO 提示失败原因
}
break;
case 'USER_LOGIN_ERROR':
// TODO 提示失败原因
break;
}
});