How to avoid empty initial state of store?

Question

I have a react app with redux for state management on the frontent. My top level component fetches data from firebase and sets the state:

 useEffect(() => {
    dispatch({ type: 'FETCH_ALL_QUESTIONS' })
  }, [dispatch]);

  useEffect(() => {
    dispatch({ type: 'FETCH_USERS'})
  }, [dispatch]);

For example question page uses questions from the state.

  const userLoggedIn = useSelector(state => state.loggedIn)
  const selectedQuestion = useSelector(state => state.selectedQuestion);
  const questions = useSelector(state => state.questions)
  const myQuestion = questions.find(q => q.id === selectedQuestion.id);
  const answers = myQuestion.answers;

But when I reload that question page, the entire state is returned to its initial state. At that point question page crashes the entire app and the state is not fetched again. Is there a way to aviod this?

If you are looking for a persistent store. Please refer this [link](https://stackoverflow.com/a/37197370/11377682) — parth kabariya, Jan 11 '22 at 16:55

score 0 · Answer 1 · answered Jan 11 '22 at 16:37

You can add condition as:

const questions = useSelector(state => state.questions ? state.questions : [])
const myQuestion = questions.find(q => q.id === selectedQuestion.id);
const answers = myQuestion && myQuestion.length > 0 ? myQuestion.answers : null;

How to avoid empty initial state of store?

1 Answers1