I could use some guidance/nudge/light on an issue i’m having. I am trying to figure out a way to create fetchUserImg, so that it can display user profile picture. Initially, the user’s ID number comes from the event’s host\_id number. So basically the component should 1) grab event’s information(including the host\_id) 2) pass that host\_id into fetchUserImg to grab the user’s profile picture. But I am running into a problem that i’ve been trying to tackle. I’ve done a good amount of search, and while I found similar situations, I cannot replicate the solution to work on this instance. I’ve attached the pastebins.

<https://pastebin.com/7pdPG19c> - EventsFeed.js

```
class EventsFeed extends Component {
  constructor(props) {
    super(props);
  }
  async componentWillMount() {
    const eventId = this.props.match.params.id;
    await this.props.fetchEventInfo(eventId);
  /* fetching user's profile picture here */
    const hostId = this.props.selectedEvent.info.user_id;
    const userPhoto = await this.props.fetchUserImg(hostId);
  /* done fetching user's profile picture */ 
    await this.props.fetchUserInfo(sessionStorage.getItem('userId'));
  }
  onCreatePost() {
    const body = this.props.eventWallPost;
    const eventId = this.props.match.params.id;
    const authorId = sessionStorage.getItem('userId');
    this.props.createPostOnEventWall({ body, eventId, authorId}, this.props.fetchEventInfo);
  }

```

<https://pastebin.com/knKyrjdr> - user\_reducer.js

```
import { FETCH_USER_INFO, FETCH_USER_IMG } from '../actions/types';
const INITIAL_STATE = {}
export default (state = INITIAL_STATE, action) => {
  switch(action.type) {
    case FETCH_USER_INFO:
      return action.payload.data;
    case FETCH_USER_IMG:
      return action.payload.data;
    default:
      return state;
  }
};

```

<https://pastebin.com/Enf2Pc6p> - user\_actions.js

```
export function fetchUserImg(userId) {
 async (dispatch) => {

   const response = await axios({
     method: 'get',
     url: 'http://localhost:9000/api/v1/users/info',
     headers: {"id": userId}
   });

    return dispatch({ 
      type: FETCH_USER_IMG,
      payload: response.data.photo })
  };
}

```

<https://pastebin.com/jCCF7TrS> - types.js

```
export const FETCH_USER_IMG = 'fetch_user_img';

```

The Error when the page is loaded

```
   Unhandled Rejection (Error): Actions must be plain objects. Use custom middleware for async actions.
    4 stack frames were collapsed.
    EventsFeed._callee$
    src/EventsFeedPage/EventsFeed.js 31
      28 | 
      29 | /* fetching user's profile picture here */
      30 |   const hostId = this.props.selectedEvent.info.user_id;
    > 31 |   const userPhoto = await this.props.fetchUserImg(hostId);
      32 | /* done fetching user's profile picture */ 
      33 | 
      34 |   await this.props.fetchUserInfo(sessionStorage.getItem('userId'));
    View compiled
    5 stack frames were collapsed.

```