옵저버를 redux-sagas로 보내기

Question

나는 redux-sagas 프레임 워크에서 관찰 할 수있는 파이어베이스를 활용하려고하지만 해킹없이이 작업을 수행하는 데 문제가 있습니다.

: 여기

firebase.auth().onAuthStateChanged(function(user) { 
    if (user) { 
    // User is signed in. 
    } else { 
    // No user is signed in. 
    } 
}); 

같이 내 방법 파일 또는 내 중포 기지 유틸리티에서

사용자가 로그 아웃은 다음과 같습니다마다 나는 본질적으로 관찰자가 실행 중포 기지의 "onAuthStateChange"기능을 사용하려고 해요

export function* loginState(){ 
    Firebaseutils.authChanged(function(user){ 
     if(user){ 
      console.log('User logged in!') 
     }else{ 
      console.log('User logged out') 
     } 
    }); 
} 

: 제 사가 다음

authChanged:() =>{ 
    return firebaseAuth.onAuthStateChanged(callback); 
} 

는 순간, 나는 단순히 관찰자가 뭔가를 관찰 할 때마다 콘솔에 로그인하기 위해 노력하고있어

'콜백'이 정의되지 않아 실패합니다. 나는 본질적으로 관중에게 카레를 보내려하지만 사가가 보이지는 않는다. 내 해결 방법은 전체 firebase 인증 객체를 로그인/로그 아웃 사가에 전달한 다음 거기에 관찰자를 생성하는 것입니다. 그건 작동하지만 해킹처럼 보인다. 어떤 도움이라도 대단히 감사 할 것입니다.

Answer 1

authChanged에 대한 매개 변수로 callback을 사용하고 싶지만 authChanged에는 현재 매개 변수가 없습니다.

authChanged: (callback) => { 
    return firebaseAuth.onAuthStateChanged(callback); 
} 

나는 당신이 관찰자를 무두질 무슨 뜻인지 이해가 잘 모르겠어요하지만 당신은 또한 당신의 방법으로 사용하는 중포 기지 방법을 카레 같은 것을 할 수 있습니다 : 여기 당신은 아마 할 무엇을 의미하는 것이

{ 
    authChanged: ::firebaseAuth.onAuthStateChanged, 
} 

Answer 2

실제로는 observer을 코드 미리보기의 saga에 통합한다고 생각하지 않습니다. 동기화 기능 인 console.log b/c에서 작동하지만 해당 컨텍스트가 generator과 별개이므로 해당 콜백의 내용을 yield 수 없습니다. 이것은 @ all에서 작동하는 경우 많은 수의 sagas 유틸리티를 사용하지 못하게합니다.

내 프로젝트에서이 작업을 수행해야했으며, 할 수있는 최선은 this project 및 아키텍처가 this starter-kit 인 것에 영감을 받았습니다.

기본적으로 몇 가지 단계가 있습니다.

1. 는 dispatch를 취하고 promise을 반환 기능에 관찰자 랩.

   export function initAuth(dispatch) { 
   return new Promise((resolve, reject) => { 
   
   myFirebaseAuthObj.onAuthStateChanged(
       authUser => { 
       if (authUser) { 
        dispatch(signInFulfilled(authUser)) 
       } else if (authUser === null) { 
        dispatch(signOutFulfilled()) 
       } 
       resolve() 
       }, 
   
       error => reject(error) 
   ) 
   }) 
   } 
   

2. 이 initAuth에 랩 render()

   const initialState = window.___INITIAL_STATE__ 
   const store = createStore(initialState) 
   let render =() => { 
       const routes = require('./routes/index').default(store) 
   
       ReactDOM.render(
       <AppContainer store={store} routes={routes} />, 
       MOUNT_NODE 
   ) 
   } 
   

3. 함수에서 최상위 컨테이너를 랩 :

   initAuth(store.dispatch) 
       .then(() => render()) 
       .catch(error => console.error(error)) 
   

4. 사용하여 sagas 아무것도합니다.예를 들어, 당신은 다음처럼 sagas에서 경로-변경을 수행 할 수 있습니다 :

   는

   function* signIn(authProvider) { 
       try { 
       const authData = yield call([firebaseAuth, firebaseAuth.signInWithPopup], authProvider) 
       yield take(SIGN_IN_FULFILLED) 
       browserHistory.push('/dash') 
       } 
       catch (error) { 
       yield put(signInFailed(error)) 
       } 
   }