如何将来自 Firebase 的数据写入快速存储? [英] How can i write data that is coming from Firebase to store quickly?

问题描述

首先，我正在使用 React Native.我正在从 Firebase 获取数据并希望快速写入存储(通过 Redux).但它不起作用.你可以在下面找到我的所有代码:

Firstly, I'm working with React Native. I'm getting a data from Firebase and want to write to store (by Redux) quickly. But It doesn't work. You can find my all of codes below:

功能:

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() 函数正在工作.

There is a FlatList in my page and I defined a button in renderItem of FlatList. When i click to this button, getTumData() function is working.

当我第一次点击这个按钮时，selectedGroupDetail 是 null.第二次，它显示以前的数据.

When i click to this button first time, selectedGroupDetail is null. Second time, it shows previous data.

如何快速快速地将数据写入Store?

How can i write a data to Store quickly and fast?

谢谢，

推荐答案

事情是:- 您在代码中同时使用 async/await 和 then/catch.- 在异步代码解析之前调用 getSelectedGroupDetail.

The thing is: - You're using both async/await, and then/catch in your code. - you're calling getSelectedGroupDetail before your async code resolves.

快速解决方案

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 中间件.第二:将你的异步代码移到你的动作创建器中:我是说这个

1st: use Redux-Thunk middleware. 2nd: Move your Async code into your action creator: I mean this

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

  }

第三:在您的 selectedGroupDetail 解析之前，您的减速器应该有另一条数据作为时间间隔的指示器:

3rd: Your reducer should have another piece of data as an indicator for the time-gap before your selectedGroupDetail resolves:

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

4th:在你的动作创建者中，你应该分派 3 个动作:ACTION_NAME_START//这应该只在您的减速器中将加载设置为 true.ACTION_NAME_SUCCESS//将加载设置为 false，并将 selectedGroupDetail 设置为返回的新集合ACTION_NAME_FAIL//如果操作失败设置错误

4th: Inside your action creator, you should dispatch 3 actions: ACTION_NAME_START // This should should only set loading to true in your reducer. ACTION_NAME_SUCCESS // set loading to false, and selectedGroupDetail to the new collection retured ACTION_NAME_FAIL // in case op failed set error

5th:你的 React 组件，应该显示一个加载指示器(微调器或其他东西)，并且可能在加载状态期间禁用 FlatList 按钮.

5th: Your React component, should display a loading indicator (spinner or somthing), and maybe disable FlatList button during the loading state.

// 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;
  }
};

这篇关于如何将来自 Firebase 的数据写入快速存储?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！