setSignVisible的修改

store傳入accountReducer

1.從cookie中獲取id,avatar,nickname.
2.createStore(reducer, initState)傳入reducer,能夠在頁面中state.accountReducer.current_account獲取cookie

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){app

return {
  type: SET_SIGN_IN_POPUP_VISIBLE,
  value: value
};

}
4.reducer:
function current_account(state={}, action){this

switch(action.type){
  case SET_ACCOUNT:
    return Object.assign({}, state, action.data);
  case INIT_ACCOUNT:
    return action.data;
  default:
    return state;
}

}spa

{
    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) {code

dispatch(setSignInPopupVisible(true));

}router

checkStatus: function(){
  const {current_account} = this.props;
  if(!current_account.id){
    this.setSignVisible(true);
    return false;
  }else{
    return true;
  }
}
相關文章
相關標籤/搜索