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;}
}