Typography

活版印字


  • Home
  • Archive
  • Categories
  • Tags
  •  

© 2020 alincode

Theme Typography by Makito

Proudly published with Hexo

React 防止連點

Posted at 2016-03-30 React 

實作流程

  • 有一個 isSending 狀態,記錄是否在之前已經送出 submit,只是 response 還沒回來。
  • 加兩個 Action Type,AUTH_SENDING 和 AUTH_SENT
  • 在 Store 的地方要更新 isSending 狀態

Component 要做的事

1
2
3
4
5
6
7
8
submit() {
var email = this.state.email
var password = this.state.password

if (email && password && !this.state.isSending) {
AuthActions.login(email, password);
}
}

Action 要做的事

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
module.exports.login = function(email, password) {

AppDispatcher.dispatch({
action: AuthConstants.AUTH_SENDING,
});

var req = new XMLHttpRequest();
...略...
req.onreadystatechange = function() {
if (req.readyState !== 4) return;

AppDispatcher.dispatch({
action: AuthConstants.AUTH_SENT,
});

switch (req.status) {
case 200:
AppDispatcher.dispatch({
action: AuthConstants.AUTH_LOGINED,
...略...
});
}
};
...略...
};

Store 要做的事

1
2
3
4
5
6
7
8
9
case AuthConstants.AUTH_SENDING:
_isSending = true;
AuthStore.emitChange();
break;

case AuthConstants.AUTH_SENT:
_isSending = false;
AuthStore.emitChange();
break;

Share 

 Previous post: Flux 生命週期範例 Next post: Jade Mixins 

© 2020 alincode

Theme Typography by Makito

Proudly published with Hexo