title: Loading screen when fetching data via Redux
body: <p>I want to start adding loading screens to my components when I'm fetching data from my API. I've made some research and tried my best, but my loading screen never disappears and I don't know why. I've tried to solve this for a while now hehe.</p>
  
  <h3>Action:</h3>
  
  <pre><code>const setDoors = data =&gt; {
    return {
      type: 'SET_DOORS',
      payload: {
        setDoors: data
      }
    }
  }
  </code></pre>
  
  <p>...</p>
  
  <pre><code>export const fetchDoors = () =&gt; async (dispatch, getState) =&gt; {
    try {
      dispatch({ type: 'FETCH_DOORS' })
      const doors = await axios.get(`${settings.hostname}/locks`).data
      dispatch(setDoors(doors))
  </code></pre>
  
  <h3>Reducer:</h3>
  
  <pre><code>const initialState = {
    isLoading: false
  }
  
  export const fetchDoors = (state = initialState, action) =&gt; {
    switch (action.type) {
      case 'FETCH_DOORS':
        return { ...state, isLoading: true }
  
      case 'FETCH_DOORS_SUCCESS':
        return { ...state, doors: action.payload.setDoors, isLoading: false }
  </code></pre>
  
  <p>In my component I only have this:</p>
  
  <pre><code>if (this.props.isLoading) return &lt;div&gt;laddar&lt;/div&gt;
  </code></pre>
  
  <p>And when I log it I'm always getting true:</p>
  
  <pre><code>const mapStateToProps = state =&gt; {
    console.log(state.fetchDoors.isLoading) // Always true
    return {
      doors: state.fetchDoors.doors,
      isLoading: state.fetchDoors.isLoading,
      controllers: state.fetchDoors.controllers
    }
  }
  </code></pre>
  
  <h3>Console</h3>
  
  <p><a href="https://i.stack.imgur.com/GQl0t.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/GQl0t.png" alt="enter image description here"></a></p>