javascript - Firebase Realtime Database returns no response when fetching data

Question

I'll try to be as clear as possible.

I'm using REDUX to manage the state.
Also, I used Firebase REST API for the POST and GET request.

I'm working on a "Manage" component which will simply display a button "NEW CUSTOM HABIT". On clicking, it opens a modal to enter the habit and then I store(by clicking on the 'Add Habit' button that submits the form) it to the firebase database by dispatching the "onAddHabit" action. It rightly stores the habit in the database.

Now, as soon as the modal gets closed(since we did click the 'Add Habit' button) I want to fetch the data from the firebase database immediately so that I can render the updated habits on my page.</br/> For that, I dispatched the 'onFetchHabits' action right after I dispatched action for adding habits earlier thinking that I would see the updated habits gets rendered on my page.

But that is not the case, firebase rightly stores the habit but on fetching nothing gets returned from the firebase and thus nothing gets rendered on the page.

However, when I refresh my route (http://localhost:3000/manage) due to useEffect the onFetchHabits action is dispatched and all the habits are rightly fetched from the database and all are displayed at once.

I want to be able to add and fetch and render the habits as a list as soon as they get added to the database i.e my '/manage' route always contains an updated habit list without reloading the entire page.

Please help I'm stuck

const { token, userId, onFetchHabits } = props;
useEffect(() => {
    onFetchHabits(token, userId);
  },  [onFetchHabits, token, userId]);


const habitHandler = () => {
    const habitData = {
      addedHabit: addHabit,
      chosenDays: [...tempDays],
      userId: props.userId,
    };
    props.onAddHabit(habitData, props.token);
    props.onFetchHabits(props.token, props.userId);
  };

Below are some screenshot:
(1) My '/manage' route :

(2) Modal on clicking "NEW CUSTOM HABIT" button.

question from:https://stackoverflow.com/questions/65944504/firebase-realtime-database-returns-no-response-when-fetching-data

Answer 1

Waitting for answers