Как дать команду на ре-рендер после добавления элемента в firebase?

Question

[Nikita Shchypylov]

Всем привет
При загрузке получаю все посты в componentDidMount(), но при добавлении нового элемента список обновляется только при перезагрузке страницы.
Код:

addMessage = e => {
    e.preventDefault();
    let data = {
      component: this.state.component,
      component_name: this.state.component_name,
    };
    this.props.addComponent(data);
  };

export const addComponent = data => async dispatch => {
  let comps = await fire.database().ref('components');
  comps.push({
    name : data.component,
    comp: data.component_name,
  });
};

Единственный вариант, который нашел - убрать e.preventDefault(), но это не очень нравится.

Answer 1

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

так у вас же по идее есть рабочая подписка, вы добавили данные а в событии on() они уже обновились

Comments

[Nikita Shchypylov]

Да, вот так я их тяну :

export const fetchComponents = () => async dispatch => {
  let comps = await fire.database().ref("components");
  return comps.on("value", snapshot => {
    return dispatch({
      type: FETCH_ITEMS,
      payload: snapshot.val()
    });
  });
};

Но они в стейте лежат в переменной content, она же отвечает за вывод:
<ul>{content}</ul>

Когда я добавляю элемент, это переменная не меняется и код не обновляется :(

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

Nikita Shchypylov, action все правильно, или мутируете данные, или что то не то с компонентом

[Nikita Shchypylov]

Олег Гамега, Хм...но ведь он вызывается один раз в componentDidMount. Мне кажется, нужно что-то вроде on("child_added"), или как-то менять родной стейт, а не редакса...

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

Nikita Shchypylov, на самом деле нет, при старте вы дергаете в componentDidMount метод котоырй подпишится на узел, а дальше подписка продолжает жить
что говорит redux devtools ?

[Nikita Shchypylov]

Олег Гамега, Странно, в порядке, вызывает мой AC
Кстати, спасибо за react devtools, не знал о нём :)

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

Nikita Shchypylov, значит скорее всего мутируете стору

[Nikita Shchypylov]

Олег Гамега,
import * as actions from "../actions";

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

[Nikita Shchypylov]

Олег Гамега, Так я создаю стор с моими элементами

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

Nikita Shchypylov, если items массив то нужно
return [...state, ...items];

Answer 2

[Максим]

Вам нужно подписаться на события от Firebase (API документация - может здесь, может где-то еще в доке, должно быть что-то связанное с "сообщениями от базы", скорее всего здесь).

Далее, когда вам приходить событие в стиле: в_базу_добавился_новый_элемент вы должны вызвать action, который будет обновлять у вас в сторе ваши данные. Таким образом, если тут все правильно приготовить, то у вас в компонент придут новые пропсы и он перерисуется.

То есть, здесь совсем не понадобятся методы жизненного цикла у компонентов (разве что, componentWillReceiveProps в будущем, но пока точно без него можно сделать).