重新渲染时，React应用程序崩溃

Question

I have multiple routes in my react, redux application and when navigating to a new route everything works fine, but when I refresh the page it crashes, because it tries you use data that haven't been fetched yet: This is inside of my reducer)

export const getDoorById = (reduxStore, door) => {
  console.log(reduxStore.fetchDoors.doors) // Nothing here
  return reduxStore.fetchDoors.doors.find(item => item._id == door)
}

So I tried to make a "LoadingWrapper" around all of my components:

export default class LoadingWrapper extends Component {
  render() {
    if (this.props.isLoading) {
      return <CircularProgress />
    } else {
      return this.props.children
    }
  }
}

And it works fine on components who actually dispatches isLoading = true, like here:

export function fetchEvents(state = initialState, action) {
  switch (action.type) {
    // CUSTOMERS
    case 'FETCH_CUSTOMERS':
      return { ...state, isLoading: true }

But on some of the other components reducers (they are exact same) it doesnt work and no loading icon shows up. So everything gets messed up.

I just wonder how I can fix this annoying bug that makes me unable to refresh the page.

Edit:

Here's my reducer:

const initialState = {
  isLoading: false
}

export function fetchDoors(state = initialState, action) {
  switch (action.type) {
    case 'FETCH_DOORS':
      return { ...state, isLoading: true }

    case 'FETCH_DOORS_SUCCESS':
      return { ...state, doors: action.payload.setDoors, isLoading: false }

    case 'FETCH_CONTROLLERS':
      return { ...state, isLoading: true }

    case 'FETCH_CONTROLLERS_SUCCESS':
      return {
        ...state,
        controllers: action.payload.setControllers,
        isLoading: false
      }

    default:
      return state
  }
}

// This tries to get the array of 'doors'
export const getDoorById = (reduxStore, door) => {
  return reduxStore.fetchDoors.doors.find(item => item._id == door)
}

export const getControllerById = (reduxStore, controllerId) => {
  return reduxStore.fetchDoors.controllers.find(
    item => item._id == controllerId
  )
}

Answer 1

render() {
  if(!this.props.children && !isLoading) return null;

 if (this.props.isLoading) {
   return <CircularProgress />
 } else {
   return this.props.children
 }
}