Как я могу записать данные, поступающие из Firebase, для быстрого хранения?

Question

Во-первых, я работаю с 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, и я определил кнопку в renderItem для FlatList. Когда я нажимаю на эту кнопку, функция getTumData() работает.

Когда я нажимаю на эту кнопку в первый раз, selectedGroupDetail равно null. Второй раз показывает предыдущие данные.

Как быстро и быстро записать данные в Store?

Спасибо

Answer 1

Дело в том, что: - Вы используете как асинхронный / ожидание, а затем / поймать в своем коде. - вы вызываете 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));   
  };

Лучшее решение:

1-й: используйте промежуточное ПО Redux-Thunk. 2-й: перенесите свой асинхронный код в создателя ваших действий:

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

  }

3-й: Ваш редуктор должен иметь еще один фрагмент данных в качестве индикатора для временного промежутка, прежде чем ваш selectedGroupDetail разрешит:

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

4-й: Внутри вашего создателя действий, вы должны отправить 3 действия: ACTION_NAME_START // Это должно только установить загрузку на true в вашем редукторе. ACTION_NAME_SUCCESS // установить загрузку в false и selectedGroupDetail для новой коллекции восстановлен ACTION_NAME_FAIL // если операция не удалась, установить ошибку

5th: ваш компонент 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;
  }
};