3

我正在尝试利用 redux-sagas 框架中可观察到的 firebase，但如果没有 hack，我很难做到这一点。我正在尝试使用 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')
        }
    });
}

由于未定义“回调”而失败。我本质上是在试图让观察者传递给 sagas，但它不起作用。我的解决方法是将完整的 firebase auth 对象传递给我的登录/注销 saga，然后在其中创建观察者。这有效，但似乎是一个黑客。任何帮助将不胜感激。

4

2 回答 2

2

我认为您实际上并没有将其集成observer到saga您的代码段中。它适用于console.log作为同步函数的 b/c，但你不能yield从该回调中获得任何东西，因为它的上下文与generator. 这剥夺了你很多sagas实用程序，如果它工作@ all。

我必须在我的项目上进行这项工作，而我能做的最好的事情就是受到这个项目和这个 starter-kit中的架构的启发。

基本上就是几步。

  1. dispatch将您的观察者包装在接受并返回 a的函数中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))
  }
}
于 2016-10-21T19:49:51.093 回答
0

似乎您打算将其callback作为参数，authChanged但authChanged目前没有参数。以下是您可能打算做的事情：

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

我不确定我理解你对观察者进行咖喱的意思，但你也可以做这样的事情来咖喱firebase方法作为你的方法：

{
    authChanged: ::firebaseAuth.onAuthStateChanged,
}
于 2016-09-15T05:03:10.103 回答