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对象传递给我的login / logout saga，然后在那里创建观察者。这工作但似乎是一个黑客。任何帮助都将非常感激。

Answer 1

我认为您实际上并未将observer整合到代码段中的saga。它适用于console.log b / c这是一个同步函数，但你不能yield来自该回调的任何内容，因为它的上下文与generator的上下文是分开的。这会剥夺你很多sagas实用程序，如果它适用于@ all。

我必须让这个工作在我的项目上，我能做的最好的工作是受this project和this starter-kit中的架构的启发。

基本上，这是几个步骤。

将观察者包裹在需要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)
)
})
}

将您的顶级容器包装在一个函数中

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

在render()中包裹initAuth：

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

将您的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);
}

我不确定我是通过调整观察者来理解你的意思，但你也可以做这样的事情来讨论使用firebase方法作为你的方法：

{
    authChanged: ::firebaseAuth.onAuthStateChanged,
}

将观察者传递给redux-sagas

2 个答案: