0

I am basically working on an app where people can ask questions. So when the user posts a new question, I update my redux store. And then I push the changes to firebase. But the thing is that the new changes are not reflected in the firebase as the redux update takes some time and by that time the firebase update function has already been called. How do I change this?

Code where I update my store and call the firebase update.

this.props.newQuestion(this.state.addedData);
    console.log("Hello there " + JSON.stringify(this.props.user));
    let temp = this.props.user;
    console.log("This is  temp" + JSON.stringify(temp));

    firestore()
      .collection("users")
      .doc(this.props.user.id)
      .update({
        user: temp,
      })
      .then(() => {
        console.log("From the then" + JSON.stringify(this.props.user));
        console.log("User updated!");
      })
      .catch((err) => {
        console.log(err);
      });

Definition of my dispatcher for this redux update function -

case ADD_QUESTION:
      //console.log("From the actions" + JSON.stringify(action.question));
      return {
        ...state,
        user: {
          id: state.user.id,
          name: state.user.name,
          email: state.user.email,
          courses: state.user.courses,
          // adding the new question everytime
          questions: state.user.questions.concat(action.question),
        },
      };
Tushar Poddar
  • 23
  • 1
  • 5

1 Answers1

1

Tushar , ifollowed this idea and answer by Kokovin Vladislav , do check. out the link and also his answer below link-2-answer

component should be updated to receive new props.

there are ways to achieve your goal:

1. componentDidUpdate check if value is changed, then do something..

 componentDidUpdate(prevProps){
     if(prevProps.value !== this.props.value){ alert(prevProps.value) }
  }
2. redux-promise ( middleware will dispatch the resolved value of the promise)

export const updateState = (key, value)=>
Promise.resolve({
  type:'UPDATE_STATE',
  key, value
})
then in component

this.props.dispatch(updateState(key, value)).then(()=>{
   alert(this.props.value)
})
2. redux-thunk

export const updateState = (key, value) => dispatch => {
  dispatch({
    type: 'UPDATE_STATE',
    key,
    value,
  });
  return Promise.resolve();
};
then in component

this.props.dispatch(updateState(key, value)).then(()=>{
   alert(this.props.value)
})

hope it helps you, this answer is pretty well explained.

Gaurav Roy
  • 11,175
  • 3
  • 24
  • 45
  • This answer does help me. Also along with this for some reason when I try to run my app on an android emulator it builds successfully but then it does not run on the emulator. It says that the app stopped. I am using firebase in my app. What do you think is this error realted to? Any way I can debug it? – Tushar Poddar Jul 10 '20 at 12:55
  • you just got error? what did you implement or any library or any code from above? – Gaurav Roy Jul 10 '20 at 12:58
  • no, I did not get the error because of adding this code but I had this for some time but then I continued my development for ios thinking it will be sorted later. – Tushar Poddar Jul 10 '20 at 19:31
  • Have you installed the pod for it – Gaurav Roy Jul 11 '20 at 02:41