Почему при попытке вывести элементы из Firebase ничего не выходит?

Question

[Nikita Shchypylov]

Привет всем
Не могу вывести элементы из фаербазы. В AC - выводит, в reducer - выводит, а вот уже в компоненте нет.
Код :

componentDidMount() {
    const ideas = firebase.database().ref("items");
    let arr = [];
    ideas.on("value", snapshot => {
      let items = snapshot.val();
      for (let item in items) {
        arr.push({
          id: item,
          text: items[item].text
        });
      }
    });
    this.props.renderIdeas(arr);
  }

AC :

export function renderIdeas(ideas) {
  return {
    type: RENDER_IDEAS,
    payload: ideas
  };
}

Reducer :

export default function(state = [], action) {
  switch (action.type) {
    case RENDER_IDEAS:
      return action.payload;
    default:
      return state;
  }
}

UPD:
Оказывается, все в порядке, но я не могу вывести данные console.log'ом даже.

Вот мой код:

render() {
    var Items = this.props.ideas;
    console.log(Items); //это выводит в порядке
    for (var key in Items) {
      console.log(key); //это уже не работает
    }
}

Вывод выглядит так:

Comments

[Олег Гамега]

а что в самом редюсере ? что показывает редукс дев тулс ?

[Nikita Shchypylov]

Олег Гамега, Прошу прощения, работает. Дополнил проблему. Можете глянуть?

[Роман Александрович]

Nikita Shchypylov, попробуйте использовать map для обработки объекта
Object.keys(items).map
Вместо for

[Nikita Shchypylov]

Роман Александрович, спасибо, попробую. Вы работали когда-то в связке Реакт-Фаербаз?

[Антон Спирин]

Зачем вы в render массив for in перебираете?
Зачем для render редьюсер?
почему забираете данные из firebase не через сагу?
У вас вся архитектура наизнанку.

[Nikita Shchypylov]

Антон Спирин, так сказать, «теЩЩу»
Мне нужно понять, почему он не хочет их вывести в рендер
Редюсер - почему нет? Можно было и в обычной ф-й, но для практики пусть будет
Сага? Не слышал о таком

[Антон Спирин]

Nikita Shchypylov, redux-saga сейчас стандарт в React разработке.
Очень плохая практика лазить через высокий забор рядом с открытой калиткой.
Вам для результатов из firebase надо reduсer делать. А забирать их с помощью redux-saga.
Вот это будет хорошая практика.
Массивы перебирают функцией forEach. А рендерят функцией map

return (
  <ul>
    {array.map((el , i) => (
      <li key={i}>
        {el}
      </li>
    ))}
  </ul>
);

[Nikita Shchypylov]

Антон Спирин, Вам для результатов из firebase надо reduсer делать - то есть, у меня будет один редюсер с разными кейсами, на пост и гет?
Пост будет через апи фаербазы, а забирать через сагу?

[Nikita Shchypylov]

Антон Спирин, а почему у меня сейчас логом не выводит ключи не подскажите?

[Антон Спирин]

Nikita Shchypylov, да один. Можете погуглить firebase redux saga. Можете посмотреть готовые решения на github. Массив попробуйте перебрать forEach.
Код в componentDidUpdate не верный, исправить можно так:

componentDidMount() {
    const ideas = firebase.database().ref("items");
    let arr = [];
    ideas.on("value", snapshot => {
      let items = snapshot.val();
      for (let item in items) {
        arr.push({
          id: item,
          text: items[item].text
        });
      }
      this.props.renderIdeas(arr);
    });
  
  }

Причина - ассинхронность. Он у вас рендерил компонент до завершения колбека on value. Так как ссылку на массив вы передали то в консоли он отобразился и обновился. А render прошел с пустым.

Добавил в ответ.

Answer 1

[Антон Спирин]

Код в componentDidUpdate не верный, исправить можно так:

componentDidMount() {
    const ideas = firebase.database().ref("items");
    let arr = [];
    ideas.on("value", snapshot => {
      let items = snapshot.val();
      for (let item in items) {
        arr.push({
          id: item,
          text: items[item].text
        });
      }
      this.props.renderIdeas(arr);
    });
  
  }

Причина - ассинхронность. Он у вас рендерил компонент до завершения колбека on value. Так как ссылку на массив вы передали, то в консоли он отобразился и обновился, но render прошел с пустым.

Перебирать массивы for in не рекомендуется, может быть нарушен порядок элементов. Для объектов так же лучше использовать Object.keys(obj).map

Object.keys(obj).map(key => ({ id: key, text: obj[key].text }));

reducer для render использовать не надо.

Comments

[Nikita Shchypylov]

Большое спасибо, ошибку понял. Вывод починил, буду переписывать под Сагу тогда.
У меня вообще такое ощущение, что проект на Реакте - это 90% сторонние API. Это баг или фича? :)
Для базы - Сага, для аяксов - axios, для промисов - thunk...
Это его главное отличие от Ангуляра?

[Антон Спирин]

Nikita Shchypylov, не надо thunk. redux-saga хватит.

Angular - фреймворк. React - библиотека.
ИМХО, React - лучше тем, что это инструмент для одной задачи, с которой он прекрасно справляется. А каждый добавленный в стек инструмент это конкурентное решение и как только появляется решение лучше, его без проблем можно использовать. К примеру StyledComponents.
Angular, же комбайн, пытающийся покрыть все задачи фронтенда. Естественно, он вобрал в себя кучу компромиссных решений и костылей. Да и вообще одна из основных задач Angular - это конвейерная корпоративная разработка.