observerをredux-sagasに渡す

Question

私はredux-sagasフレームワーク内で観測可能なfirebaseを活用しようとしていますが、ハックなしでこれを行うのは難しいです。

：ここ

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

示すように、私の方法をファイルまたは私firebaseユーティリティで

アウトユーザーのサインはこのように見える時はいつでも私は基本的に観察者が実行firebaseの「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); 
} 

私は私はあなたがオブザーバーをカリー化することによって何を意味するか理解していないが、あなたはまた、あなたの方法として使用するfirebase方法をカレーに、このような何かを行うことができます：ここでは、おそらく行うにはどのような意味だ

{ 
    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. 機能に

   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でrender()あなたのトップレベルのコンテナをラップ：何かのためにあなたのsagasを使用

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

4. を。例えば、あなたはそうのようなあなたの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)) 
       } 
   }