Redux не рендеринг компонента

Question

Я знаю, что есть много сообщений на эту тему, но я думаю, что мой редуктор настроен правильно, и состояние возвращает обновленное состояние.

Мое начальное состояние: callHistory: null,

Мой редукторный редуктор:

case CALL_HISTORY:
  return {
    ...state,
    callHistory: action.data,
    }

Мой компонент:

const Dashboard = () => {

  const callHistory = useSelector(state => state.user.callHistory);
  console.log(callHistory); // logs the correctly updated state
  const ccId = getUserIdFromStorage(); // gets ccId using asyncStorage
  const [_, getDatabase] = useDatabase();

  useEffect(() => {
    renderDatabase();
  }, [])

  const renderDatabase = () => {
    ccId.then(id => getDatabase(id));
  }

if (callHistory) { // Invariant Violation: Dashboard(...): Nothing was returned from render.
  return (
    <Text>
      Loading
    </Text>
    )
  }

getDatabase:

const getDatabase = ccId => {
    const docRef = db.collection("user").doc(ccId);
    docRef.get().then(doc => {
      if (doc.exists) {
        dispatch(callHistory(doc.data())); // correctly dispatches to store
      } else {
        console.log("No such document!");
      }
    }).catch(error => console.log("Error getting document:", error));
  }

Любая помощь или идеи высоко ценится!

Answer 1

Не похоже, что у вас есть еще условие, когда callHistory равно нулю. Ваш компонент должен что-то возвращать, даже если он просто возвращает null.

Добавьте что-то вроде этого:

if (callHistory) {
  return (
    <Text>
      Loading
    </Text>
  )
} else {
  return null;
}