store传入accountReducer
1.从cookie中猎取id,avatar,nickname.
2.createStore(reducer, initState)传入reducer,能够在页面中state.accountReducer.current_account猎取
const middleware = routerMiddleware(browserHistory);
let initState = {};
if(Cookie.hasItem("id")){
initState.accountReducer = {
current_account:{
id: Cookie.getItem("id"),
avatar: Cookie.getItem("avatar"),
nickname: Cookie.getItem("nickname")
}
}
}
let store = createStore(
reducer,
initState,
compose(
applyMiddleware(thunkMiddleware, middleware),
(window.RAILS_ENV === 'development' && window.devToolsExtension) ? window.devToolsExtension() : f=>f
)
);
SignInPopup组件
1.经由过程this.props.sign_in_popup_visible是true或false来推断是不是显现上岸框.
true则显现,false则隐蔽.
2.隐蔽上岸框,this.setSignVisible(false);,挪用this.props.dispatch(setSignInPopupVisible(visible));
3.Action:
function setSignInPopupVisible(value){
return {
type: SET_SIGN_IN_POPUP_VISIBLE,
value: value
};
}
4.reducer:
function current_account(state={}, action){
switch(action.type){
case SET_ACCOUNT:
return Object.assign({}, state, action.data);
case INIT_ACCOUNT:
return action.data;
default:
return state;
}
}
{
this.props.sign_in_popup_visible?
<Modal onClose={this.handleSignInPopupClose} mode="simple">
<SignInPopup />
</Modal>:""
}
sign_in_popup_visible: state.accountReducer.sign_in_popup_visible
setSignVisible: function(visible) {
this.props.dispatch(setSignInPopupVisible(visible));
}
function setSignInPopupVisible(value){
return {
type: SET_SIGN_IN_POPUP_VISIBLE,
value: value
};
}
checkStatus
1.current_account从原始状况init_state猎取.
假如首次上岸没有cookie,则挪用this.setSignVisible(true),显现上岸框.
假如有cookie信息,则return true,实行下面的代码.
this.props.dispatch(takeRedPacket(id));
else if (xhr.status === 401) {
dispatch(setSignInPopupVisible(true));
}
checkStatus: function(){
const {current_account} = this.props;
if(!current_account.id){
this.setSignVisible(true);
return false;
}else{
return true;
}
}