Redux Store не обновляет состояние созданными данными в базе данных реального времени Firebase

Question

Я настроил свои функции FireBase, и они отлично работают. Поток данных для моего приложения выглядит следующим образом:

1. Пользователь заполняет форму и отправляет {работы}
2. Данные отправляются в базу данных в реальном времени {работы}
3. Затем данные передаются обратно в хранилище избыточных данных путем прослушивания базы данных ref. {не работает}
4. Затем данные отображаются в виде таблицы истинного хранилища, чтобы пользователь мог просмотреть предоставленную им информацию. {не работает, потому что 3 не работает}

Я испытываю проблему с номером 3.

Вот мой файл действий Redux:

import {
  SAVE_FORM,
  UPDATE_STORE
} from "./types";

export const saveForm = user => {
  return {
    type: SAVE_FORM,
    payload: user
  };
};

export const updateStore = data => {
  return {
    type: UPDATE_STORE,
    payload: data
  };
};

А вот мой редуктор:

import {
  SAVE_FORM,
  UPDATE_STORE
} from "../actions/types";

const initialState = {
  users: [],
  db: ""
};

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

    case UPDATE_STORE:
      return {
        db: [action.payload]
      };
    default:
      return state;
  }
}

И, наконец, мой файл саг:

import {
  database
} from "./firebase-config"
import axios from "axios"
import {
  put,
  fork,
  takeEvery,
  take
} from 'redux-saga/effects'
import {
  eventChannel
} from "redux-saga"
import {
  SAVE_FORM,
  UPDATE_STORE
} from "./actions/types"

export function* sendRequest({
  payload
}) {
  //console.log(payload);
  yield axios.post('https://dummy.com/user', payload)
    .then(res => {
      // here will be code
      console.log(res)
    })
    .catch(error => {
      console.log(error);
    });
};

export function* watchSendAction() {
  yield takeEvery(SAVE_FORM, sendRequest);
}

function createEventChannel() {
  const listener = eventChannel(emit => {
    database.ref('entries/users').on('value', data => emit(data.val()));
    return () => database.ref('entries/users').off(listener);
  });
  return listener;
}

//This is supposed to update my store with the data received by the database
function* startListener() {
  const updateChannel = createEventChannel();
  while (true) {
    const data = yield takeEvery(updateChannel);
    yield put(UPDATE_STORE(data));
  }
}


export default function* helloSaga() {
  yield fork(watchSendAction);
  yield fork(startListener);
}

Кажется, я не могу понять, что я делаю неправильно.

Answer 1

Я подозреваю, что проблема в вашей саге startListener. Вы должны использовать цикл while с эффектом take или использовать takeEvery без цикла while. Прямо сейчас вы смешиваете их вместе.

Попробуйте это:

function* startListener() {
  const updateChannel = createEventChannel();
  while (true) {
    const data = yield take(updateChannel);
    yield put(UPDATE_STORE(data));
  }
}

или это:

function* startListener() {
  const updateChannel = createEventChannel();
  yield takeEvery(updateChannel, function*(data) {
    yield put(UPDATE_STORE(data));
  });
}