title: React-Redux + Redux-Thunk on functional component. Update UI after data is fetched from API
body: <p>I have a functional component that fetches data from an api using redux.</p>
  
  <pre><code>const useFetching = (someFetchActionCreator) =&gt; {
      const dispatch = useDispatch();
      useEffect(() =&gt; {
          dispatch(someFetchActionCreator());
      }, [])
  }
  </code></pre>
  
  <p>The component:</p>
  
  <pre><code>export function Trips(props) {
      const trips = useSelector(state =&gt; state.trips);
      useFetching(fetchTrips)
  ...
  ...
  }
  </code></pre>
  
  <p>The thunk:</p>
  
  <pre><code>export const fetchTrips = () =&gt; (dispatch) =&gt;
      axios.get("/api/v1/trips")
          .then(response =&gt; dispatch(addTrips(response.data)))
  
  export const addTrips = trips =&gt; ({
      type: ADD_TRIPS,
      payload: trips
  })
  
  </code></pre>
  
  <p>The reducer:</p>
  
  <pre><code>function tripsReducer(state = INITIAL_STATE, action) {
      console.log(action)
      if (action.type === ADD_TRIPS) {
          return Object.assign({}, state, {
              trips: state.trips.concat(action.payload)
          });
      }
      return state
  }
  </code></pre>
  
  <p>My reducer is called. How can I update the UI after the fetched data have been dispatched? My render is not called again.</p>