Reducer 被触发但订阅 function 未获取更改 [React-Redux]

Question

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;
        });
  }
}

Answer 1

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.