我该如何写入来自Firebase的数据以快速存储?

时间:2019-03-17 06:25:24

标签: firebase react-native redux

首先,我正在使用React Native。我从Firebase获取数据,并想快速写入存储区(由Redux提供)。但这行不通。您可以在下面找到我的所有代码:

功能

async getTumData (uid) {

    const {selectedGroupDetail, getSelectedGroupDetail} = this.props;
    var yeniGrupDetayi = {};
    await firebase.database().ref("/groups/"+uid).once('value').then(
      function(snapshot){
        yeniGrupDetayi = {...snapshot.val(), uid: uid};
      }).catch(e => console.log(e.message));

      console.log("FONKSIYON ICERISINDEKI ITEM ==>", yeniGrupDetayi);
      this.props.getSelectedGroupDetail(yeniGrupDetayi);
      console.log("ACTION'DAN GELEN ITEM ===>", selectedGroupDetail);

  }

操作:

export const getSelectedGroupDetail = (yeniGrupDetayi) => {
  return {
    type: GET_SELECTED_GROUP_DETAIL,
    payload: yeniGrupDetayi
  }
};

异径管:

case GET_SELECTED_GROUP_DETAIL:
      return { ...state, selectedGroupDetail: action.payload}

Çıktı:

FONKSIYON ICERISINDEKI ITEM ==> {admin: {…}, groupDescription: "Yaygın inancın tersine, Lorem Ipsum rastgele sözcü…erini incelediğinde kesin bir kaynağa ulaşmıştır.", groupName: "İnsan Kaynakları", groupProfilePic: "", members: {…}, …}

ACTION'DAN GELEN ITEM ===> {}

页面中有一个FlatList,我在FlatList的renderItem中定义了一个按钮。当我单击此按钮时,getTumData()功能正在起作用。

当我第一次单击此按钮时,selectedGroupDetailnull。第二次显示以前的数据。

如何快速,快速地将数据写入存储?

谢谢

1 个答案:

答案 0 :(得分:5)

问题是:  -您同时使用了异步/等待,然后/捕获了您的代码。  -您要在异步代码解析之前调用getSelectedGroupDetail。

快速解决方案

getTumData =  (uid) => {

    const {selectedGroupDetail, getSelectedGroupDetail} = this.props;
    var yeniGrupDetayi = {};
    firebase.database().ref("/groups/"+uid).once('value').then(
     (snapshot) => {
        yeniGrupDetayi = {...snapshot.val(), uid: uid};
        this.props.getSelectedGroupDetail(yeniGrupDetayi);
      }).catch(e => console.log(e.message));   
  };

更好的解决方案:

第一:使用Redux-Thunk中间件。 第二:将您的异步代码移到动作创建者中:我的意思是

async getTumData (uid) {

    const {selectedGroupDetail, getSelectedGroupDetail} = this.props;
    var yeniGrupDetayi = {};
    await firebase.database().ref("/groups/"+uid).once('value').then(
      function(snapshot){
        yeniGrupDetayi = {...snapshot.val(), uid: uid};
      }).catch(e => console.log(e.message));

      console.log("FONKSIYON ICERISINDEKI ITEM ==>", yeniGrupDetayi);
      this.props.getSelectedGroupDetail(yeniGrupDetayi);
      console.log("ACTION'DAN GELEN ITEM ===>", selectedGroupDetail);

  }

3rd:在您的selectedGroupDetail解析之前,reducer应该有另一条数据作为时间差距的指示:

// reducer initial state:
const INITIAL_STATE = { error: '', loading: false, selectedGroupDetail: null }

4th:在动作创建者内部,您应该分派3个动作: ACTION_NAME_START //仅应在化简器中将load设置为true。 ACTION_NAME_SUCCESS //将loading设置为false,并将selectedGroupDetail设置为新的集合 ACTION_NAME_FAIL //如果操作失败,则设置错误

第5条:您的React组件应显示一个加载指示器(旋转器或其他东西),并且在加载状态期间可能禁用FlatList按钮。

// Action creator
export const myAction = () => (dispatch) => {
  dispatch({ type: ACTION_NAME_START });
  firebase.database().ref("/groups/"+uid).once('value').then(
  function(snapshot){
    yeniGrupDetayi = {...snapshot.val(), uid: uid};
    dispatch({ type: ACTION_NAME_SUCCESS, payload: yeniGrupDetayi  });

  }).catch(e => {
  dispatch({ type: ACTION_NAME_FAIL, payload: e.message });
});

};


// Reducer
const INITIAL_STATE = {
  loading: false,
  error: '',
  data: null,
};

export default (state = INITIAL_STATE, { type, payload }) => {
  switch (type) {
    case ACTION_NAME_START:
      return {
        ...state,
        error: '',
        loading: true,
        data: null,
      };

    case ACTION_NAME_SUCCESS:
      return {
        ...state,
        error: '',
        loading: false,
        data: payload,
      };

    case ACTION_NAME_FAIL:
      return {
        ...state,
        error: payload,
        loading: false,
        data: null,
      };

    default:
      return state;
  }
};