在Flux架構中，您如何管理分析跟蹤？

Question

假設我正在構建一個像Airbnb的單頁面應用程序。 在這種應用程序中最好的一件事是跟蹤某人何時創建帳戶。

對於跟蹤部分，有很多服務會有所幫助（Google Analytics（分析），細分等）。

例如，要使用react-ga跟蹤事件，您只需使用以下命令：

ReactGA.event({
  category: 'User',
  action: 'Created an Account'
});

但是我的問題是...在助焊劑體系結構中應該如何做到？

我應該分派一個動作並為此動作添加中間件嗎？ 還是直接在signUp操作內部調用該函數？

Answer 1

幾次我不得不為類似Intercom的服務編寫非常相似的代碼。 當時我使用Redux。 在基於事件的架構中，這是基於Redux的應用程序，您只需使用中間件就可以以非常有吸引力的方式來實現它。

就我而言，我已經注意到我已經擁有所有必需的操作，而我所需要的只是在觸發某些操作后也向分析發送了一個請求。

像這樣：

function sendIntercomRequest(action) {
  // send a request to analytic tool here
}

const intercomMiddreware = store => next => action => {
  switch (action.type) {
    // take required events
    case actionTypes.SIGN_IN_SUCCESS:
    case actionTypes.SIGN_OUT_SUCCESS:
      sendIntercomRequest(action.type);
      break;
  }

  return next(action);
};

Answer 2

我可能會想到派發給“ singUpReducer”的動作“ signUp”。 就像：

export function signUp(username){
    return {
            type: SIGNUP,
            username: username
    };
}

減速器可能看起來像：

export default function signUpReducer(state = null, action){
    switch(action.type){
    case SIGNUP:
        return action.username;
    default:
       return state;
   }
}

當然，您可以在特定組件中觸發該動作，或者通過mapDispatchToProps將其從“容器”映射到“表示”組件。 我在這里看不到使用中間件的任何意義，只是您想以任何方式轉換已調度的動作有效負載。 我希望它能對您有所幫助，即使我試圖以“ Redux-way”的方式對其進行解釋。