将观测者带入redux sagas

Question

我正试图利用redux sagas框架中可观察到的firebase，但如果没有破解，我很难做到这一点。我正在尝试使用firebase的"onAuthStateChange"功能，如所示

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

我不认为您实际上是在将代码片段中的observer集成到saga中。它将适用于作为同步函数的console.log b/c，但您不能从该回调中yield任何内容，因为它的上下文与generator的上下文是分开的。这就剥夺了sagas实用程序的很多功能，如果它在@all中有效的话。

我必须在我的项目中做到这一点，我能做的最好的事情就是受到这个项目和这个入门套件中的架构的启发。

基本上，这是几个步骤。

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

Answer 2

您似乎打算将callback作为authChanged的参数，但authChanged目前不接受任何参数。以下是您可能想要做的：

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

我不确定我是否理解你所说的欺骗观察者的意思，但你也可以这样做来欺骗你的方法：

{
    authChanged: ::firebaseAuth.onAuthStateChanged,
}