관찰자를 Redex-sagas로 전달

관찰자를 Redex-sagas로 전달

나는 환원-사가스 프레임워크 내에서 관측 가능한 소방 기지를 활용하려고 하지만 해킹 없이 이것을 하는 데 어려움을 겪고 있다.여기에 표시된 것처럼 소방서의 "OnAuthStateChange" 기능을 사용하려고 함

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

기본적으로 관찰자는 사용자가 로그인하거나 로그아웃할 때마다 실행된다.

내 소방시설 파일에서 내 방법은 다음과 같다.

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에게 패스하도록 비위를 맞추려고 하는데 효과가 없다.내 해결책은 전체 소방기지 인증 개체를 내 로그인/로그아웃 사연에 전달하고 그 안에 관찰자를 만드는 것이다.그것은 효과가 있지만 해킹처럼 보인다.어떤 도움이라도 감사할 것이다.

내 생각에 당신은 실제로 그 문제를 통합하고 있는 것 같지 않다.observer의 안으로saga네 코딱지만큼 말이야그것은 효과가 있을 것이다.console.logb/c 그것은 동기화 기능인데, 당신은 할 수 없다.yield그 맥락은 그 맥락과는 별개의 것이기 때문에 그 콜백으로부터 어떤 것이든.generator이것은 당신에게 많은 것을 빼앗는다.sagas효용, 만약 그것이 @ all 효과가 있다면.

나는 이것을 내 프로젝트에 적용시켜야 했고, 내가 할 수 있는 최선은 이 프로젝트와 이 시작 키트의 아키텍처에서 영감을 얻은 것이었다.

기본적으로 몇 단계야

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

네가 일부러 그런 것 같다.callback의 매개 변수로서.authChanged그렇지만authChanged현재 어떤 매개 변수도 사용하지 않는다.당신이 하고자 했던 것은 다음과 같다.

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

관찰자를 구겨서 무슨 말인지 잘 모르겠는데, 소방 기지 방법을 구워서 네 방법으로 사용할 수도 있어.

{
    authChanged: ::firebaseAuth.onAuthStateChanged,
}

참조URL: https://stackoverflow.com/questions/39503343/passing-observer-into-redux-sagas