2016-09-22 55 views
1

我正在用firebase構建react-redux應用程序。使用Redux綁定Firebase

這裏是我的行動的創建者:

export function fetchUser(uid) { 
    let ref = firebase.database().ref('users/' + uid) 
    return dispatch => { 
    ref.on("value", (snapshot) => { 
     let obj = snapshot.val() 
     dispatch({ 
     type: FETCH_USER, 
     payload: obj 
     }) 
    }) 
    } 
} 

在我的陣營組件,我希望能夠鏈子它來包裝另一個動作。所以像這樣:

componentWillMount() { 
     let userId = 'some user id' 
     this.props.fetchUser(userId).then(()=> { 
     this.props.updateUser() // perform another action after the fetch is complete 
     }) 
} 

我很難做到這一點。

  • 一個問題是,Firebase on事件偵聽器沒有實現Promise接口。
  • 我不想移動fetchUser內的後續操作,因爲其他組件可能會調用fetchUser以及用於其他目的。

我覺得這應該是直截了當的,但我對redux以及firebase都是新手,所以所有的幫助將不勝感激。

+3

「一個問題是,Firebase on事件偵聽器沒有實現Promise接口。」 'on()'可以多次觸發,一個promise只能解析一次。 on()'不可能是一個承諾。如果你只關心單個值,那麼使用'once()'哪個*會返回一個承諾。 –

+0

@FrankvanPuffelen我同意並理解這一點。不過,我每次在組件中觸發一次回調都需要回調,以便我可以觸發另一個動作。使用'react-redux',我可以將其作爲'props'的改變,但是這並不正確。 – Rajat

+0

@FrankvanPuffelen我發現使用redux非常辛苦tbh使firebase工作:)直接打開一個問題:https://github.com/firebase/reactfire/issues/115 – Rajat

回答

0

事實上,你沒有得到從firebase返回的承諾並不真的是你的問題。你可以在你的動作創建者中返回一個承諾,然後使用你的componentWillMount()中的.then()的分辨率。我們已經做了這樣的事情:

export function fetchUser(uid) { 

    let ref = firebase.database().ref('users/' + uid); 

    return dispatch => { 
    return new Promise((resolve, reject) => { 
     ref.on("value", (snapshot) => { 
     let obj = snapshot.val(); 
     dispatch({ 
      type: FETCH_USER, 
      payload: obj 
     }); 
     resolve(); 
     }) 
    }); 
    } 
} 

另外,如果你想要firebase的承諾,你可以使用.once()。這實際上可能對你更好,所以你在/users參考號上沒有永久的傾聽者。

+0

這不會工作。 「開」可以多次啓動。因爲promise已經解決,所以'resolve'不會在第一個調用之後的所有調用中工作。 – Rajat

+0

您是否每次想要獲取值時都調用'fetchUser'動作?如果是這樣,這應該做你想要的。我們在我們的製作應用程序中使用了這種模式,它的工作原理與預期完全相同我建議你嘗試一下,而不是僅僅說它不起作用。 – imjared