Передача наблюдателя в redux-sagas

Question

Я пытаюсь использовать базу, наблюдаемую изнутри рамки redux-sagas, но у меня проблемы с этим без взлома. Я пытаюсь использовать функцию «onAuthStateChange» firebase, как показано здесь

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

существу наблюдатель выполняет всякий раз, когда пользователь входит в или из

В моей firebase утилиты файл моего метода выглядит следующим образом:

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

тогда в моей эпопеи, на данный момент, я просто пытаюсь войти в консоль всякий раз, когда наблюдатель замечает что-то:

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

Это не удается из-за «обратного вызова», которое не определено. Я по существу стараюсь, чтобы наблюдатель перешел на саги, но он не работает. Мое обходное решение состоит в том, чтобы передать полный объект firebase auth к моей саге регистрации/выхода из системы, а затем создать наблюдателя там. Это работает, но кажется взломом. Любая помощь была бы чрезвычайно оценена.

Answer 1

Похоже, что вы имели значение callback как параметр authChanged, но authChanged в настоящее время не принимает параметров. Вот то, что вы, вероятно, имел в виду сделать:

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

Я не уверен, я понимаю, что вы имеете в виду выделки наблюдателя, но вы также можете сделать что-то вроде этого, чтобы снискать в firebase метод для использования в качестве метода:

{ 
    authChanged: ::firebaseAuth.onAuthStateChanged, 
} 

Answer 2

Я не думаю, что вы действительно интегрируете observer в saga в свой фрагмент. Он будет работать для console.log b/c, что является функцией синхронизации, но вы не можете ничего yield от этого обратного вызова, так как его контекст отличается от контекста generator. это лишает вас большого количества утилиты 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. оберткой render() в initAuth:

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