redux state is not updating

Question

Action:

export const fetchNewsSuccess = (article) => ({
  type: NewsActionTypes.FETCH_NEWS_SUCCESS,
  payload: article,
});
export const fetchNewsBeginAsync = () => {
  return (dispatch) => {
    const collectionRef = fireStore.collection('news');
    dispatch(fetchNewsBegin());

    collectionRef
      .get()
      .then((snapshot) => {
        dispatch(fetchNewsSuccess(snapshot));
      })
      .catch((error) => dispatch(fetchNewsFailure(error.message)));
  };
};

Reducer

const newsReducer = (state = INITIAL_STATE, action) => {
  switch (action.payload) {
    case NewsActionTypes.FETCH_NEWS_BEGIN:
      return {
        ...state,
        isFetching: true,
      };
    case NewsActionTypes.FETCH_NEWS_SUCCESS:
      return {
        ...state,
        isFetching: false,
        news: action.payload,
      };
  }
}

redux-logger image

I'm trying to get article data from firebase database, fetching data in action (with redux-thunk) fetchNewsBeginAsync then my action has payload but state not updating can anyone help me pls

try to log snapshot and see what you are getting from firebase — Yousaf
you should log out underneath the case to see what the action type and payload are — Red Baron

subashMahapatra subashMahapatra · Accepted Answer · 2020-05-23T19:12:52

Calling collectionRef.get() will return a QuerySnapshot which contains 0 or more QueryDocumentSnapshot. You have to loop through the documents in QuerySnapshot object and call the .data() method on each document to extract the data.

export const fetchNewsBeginAsync = () => {
  return (dispatch) => {
    const collectionRef = fireStore.collection('news');
    dispatch(fetchNewsBegin());

    collectionRef
      .get()
      .then((querySnapshot) => {
         // extract the data first
         const results = querySnapshot.docs.map(doc => doc.data());
         // dispatch your action with results as payload
         dispatch(fetchNewsSuccess(results));
      })
      .catch((error) => dispatch(fetchNewsFailure(error.message)));
  };
};

There is also an error in the reducer. You should be checking action.type as condition in the switch statement.

const newsReducer = (state = INITIAL_STATE, action) => {
  switch (action.type) {
    case NewsActionTypes.FETCH_NEWS_BEGIN:
      return {
        ...state,
        isFetching: true,
      };
    case NewsActionTypes.FETCH_NEWS_SUCCESS:
      return {
        ...state,
        isFetching: false,
        news: action.payload,
      };
  }
}

redux state is not updating

1 Answers