CODEWITHSUNDEEP
javascriptreactjsreduxreact-redux
Jingles
Jingles

Reputation: 1135

Reducer gets triggered but subscribe function not fetching the change [React-Redux]

reducer shows that I've received doc data from Firestore. docStore.subscribe is listening, but is not updating with latest doc data.

Expected outcome: upon page load, will get docId from URL, and query Firestore. Upon receiving data, update the store, and subscribe to populate the view with doc information.

homepage.js

const Homepage = ({ docId }) => {

  const [doc, setdoc] = useState(false);

  console.log(docId); // <-- 123

  docStore.subscribe(() => {
    console.log('docStore state changed:', docStore.getState()); // <-- docStore state changed: undefined
    setdoc(docStore.getState());
  })  

  return (
    <div>
      <div>{docId}</div> {/* 123 */}
      <div>{doc.docName}</div> {/* blank */}
    </div>
  );
};

reducer.js

export default function reducer(state = {}, action) {
  switch (action.type) {

    case docTypes.LOAD_DOC_PAGE:
      firebase.firestore().collection("docs")
        .where('docId', '==', action.payload.docId.toLowerCase())
        .get()
        .then(function (data) {

          if (data.docs.length === 1) {
            state = data.docs[0].data();
          }

          console.log('gotten doc', state) // <-- gotten doc data

          return state;
        });
  }
}

Upvotes: 1

Views: 33

Answers (1)

markerikson
markerikson

Reputation: 67499

Your reducer is very broken. Reducers must never make async calls!. That API call needs to be moved somewhere else entirely, and then you should dispatch an action that will cause the reducer to run and calculate an updated state.

Also, you generally shouldn't subscribe to the store yourself. Use the React-Redux connect and useSelector APIs to extract data needed by components from the store state.

Upvotes: 1

Related Questions