title: Async Image Load with React and Redux
body: <p>I am trying to create a simple message wall with a <code>&lt;PostList /&gt;</code> container which displays a list of <code>&lt;Post /&gt;</code> components. </p>
  
  <pre><code> {posts.map(function (post: any) {
                  return &lt;Post key={post.postid} post={post} /&gt;;
              })}
  </code></pre>
  
  <p>I pass in a single post to the <code>Post</code> component which has a <code>&lt;Avatar /&gt;</code> component that displays the users profile_pic inside it otherwise it displays a spinner. </p>
  
  <p><strong>My question is how would I allow the components to display on screen and once the image is loaded replace the spinner with the retrieved image?</strong></p>
  
  <p>I currently have the following Reducers and Actions:</p>
  
  <p><strong>User Reducer:</strong></p>
  
  <pre><code>export default function(state = INITIAL_STATE, action : any){
      switch(action.type){
          case FETCH_USER_LOADING:
              return Object.assign({}, state, {isLoading: true});
          case FETCH_USER_DONE:
              return Object.assign({}, state, {users: state.users.concat(action.payload)});
  }
  
      return state;
  }
  </code></pre>
  
  <p><strong>User Actions:</strong></p>
  
  <pre><code>export function fetchUser(id: any) {
      return function (dispatch: any) {
          dispatch({ type: FETCH_USER_LOADING });
          return axios.get(`${ROOT_URL}/users/${id}`, {
              headers: { token: localStorage.getItem('token') }
          })
              .then(function (response) {
                  dispatch({type: FETCH_USER_DONE, payload: response.data});
                  return response.data
              })
      } 
  }
  </code></pre>