代码之家  ›  专栏  ›  技术社区  ›  Prometheus

Redux Firestore快照

  •  0
  • Prometheus  · 技术社区  · 6 年前

    所以我现在正在学习一个教程,作者使用redux在实时数据库的帮助下实时更新数据。在redux文件中,他使用.on方法,如下所示:

    const watchPersonData = () => {
      return function(dispatch) {
        firebase.database().ref("person").on("value", function(snapshot) {
    
            var personData = snapshot.val();
            var actionSetPersonData = setPersonData(personData);
            dispatch(actionSetPersonData);
    
        }, function(error) { console.log(error); });
      }
    };
    

    但是,我想使用cloudfirestore,所以我尝试用onSnapshot方法转换这段代码。但是,用户未定义:

    const watchPersonData = () => {
      return function(dispatch){
    
    
    
        db.collection('user').doc().onSnapshot(function(snap){
    
    
    
        var personData = snap.val();
        var actionSetPersonData = setPersonData(personData);
        dispatch(actionSetPersonData);
    
      })
    
      }
    };
    

    目前我有一个名为“user”的集合,在这个集合中有一个自动生成id的文档(这就是doc()为空的原因),在这个文档中有一个名为username的字符串。知道为什么吗这个.props.personData.username在控制台中未定义?

    整个应用程序redux文件:

    import { createStore, applyMiddleware } from 'redux';
    import thunkMiddleware from 'redux-thunk';
    import * as firebase from 'firebase';
    
    
    const db = firebase.firestore;
    
    
    var config = {
        //config data for firebase
      };
    
    firebase.initializeApp(config);
    
    
    const initialState = {
      personData: { },
    }
    
    const reducer = (state = initialState, action) => {
    
      switch(action.type){
        case 'setPersonData':
          return { ...state, personData: action.value};
    
        default:
          return state;
    
      }
    }
    const store = createStore(reducer, applyMiddleware(thunkMiddleware));
    
    
    
    
    const setPersonData = (personData) => {
    
      return{
        type: "setPersonData",
        value: personData
      };
    };
    
    const watchPersonData = () => {
      return function(dispatch){
        console.log('called')
    
    
        db.collection('user').doc().onSnapshot(function(snap){
    
    
        console.log(snap)
        var personData = snap;
        var actionSetPersonData = setPersonData(personData);
        dispatch(actionSetPersonData);
    
    
    
    
      })
    
      }
    };
    
    
    
    
    
    
    
    
    export { setPersonData, watchPersonData};
    export { store };
    

    谢谢大家!提前!

    1 回复  |  直到 6 年前
        1
  •  0
  •   Manny Hagman    6 年前

    您正在尝试访问用户集合中的特定用户文档吗?你没有指定一个文档Id,我很确定这会导致你的未定义用户。

    您可以直接对集合调用onSnapshot并接收集合更新(例如添加了另一个文档),也可以对特定文档调用onSnapshot,就像您正在做的那样,并在文档更改时进行更新。一种简单的测试方法是将集合中的Id作为doc参数的核心,订阅doc更改并登录到控制台(doc changed),然后在firestrom控制台中进行手动更改。