title: Using react-redux I'm trying to create middleware to do async await logic to be able to use this.props.getUser action function
body: <pre><code>&gt; // I get user here with action function which makes call to route
  
  /api/users/$_id
      export const getUser = (_id) =&gt; (dispatch) =&gt; {
          dispatch(setUsersLoading());
          axios.get(`/api/users/${_id}`)
              .then(res =&gt;
                  dispatch({
                      type: GET_USER,
                      payload: res.data
                  }))
              .catch(err =&gt;
                  dispatch(returnErrors(err.response.data, err.response.status))
              );
      }
      
  
  &gt; // This is my Manage Role Assignment component class
  
      class ManageRoleAssignment extends Component {
          constructor(props) {
              super(props)
      
              this.state = {
                  currentPage: 0,
                  roles: &quot;&quot;,
                  selected: [], // this the state I'm using!
                  personnel: []
              }
          }
      
          static propTypes = {
              getUsers: PropTypes.func.isRequired,
              **getUser: PropTypes.func.isRequired**, //Prop action function used!
              users: PropTypes.object.isRequired,
              **user: PropTypes.object.isRequired**, //The prop object used!
          }
          componentDidMount() {
              this.props.getUsers(); 
      
          }
      
          handleChange = (e) =&gt; {
          let target = e.target
          let name = target.name
          let value = Array.from(target.selectedOptions, option =&gt; option.value)
          this.setState({
              [name]: value
          })
  
         
      }
  
  &gt; I'm calling the this.props.getUser here in the onSubmit
  
          onSubmit = (e) =&gt; { 
          console.log(&quot;SELECTED&quot;, this.state.selected)
          console.log(&quot;PERSONNEL&quot;, this.state.personnel)
          //let { user } = this.props.user
          this.props.getUser(this.state.selected)
  
          console.log(&quot;USER&quot;, this.props.user)
          e.preventDefault();
          }
  </code></pre>
  <blockquote>
  <p>The beginning of my render function for the class</p>
  </blockquote>
  <pre><code>        render() {
          let { users } = this.props.users
          const { currentPage } = this.state
          this.pageSize = 1;
          this.pagesCount = Math.ceil(10 / this.pageSize)
      
          return (
              &lt;div&gt;
                  &lt;Container className=&quot;list&quot;&gt;
                      &lt;form onSubmit={this.handleSubmit}&gt;
                          &lt;ListGroup&gt;
  </code></pre>
  <blockquote>
  <p>This is the beginning of my multi select element where the users are
  selected for the this.state.selected state</p>
  </blockquote>
  <pre><code>                            &lt;h5&gt;Select 1 or more users.&lt;/h5&gt;
                              &lt;select size=&quot;2&quot; value={this.state.selected} onChange={this.handleChange}
                                  style={{ width: 265 + 'px', fontSize: 20 + 'px' }} name=&quot;selected&quot; id=&quot;users&quot; multiple&gt;
                                  {users.map(({ _id, name, email, role }) =&gt; (
                                      &lt;option value={_id}&gt;
                                          {name}
                                      &lt;/option&gt;
                                  ))}
                              &lt;/select&gt;
                          &lt;/ListGroup&gt;
                          &lt;br /&gt;
                          &lt;br /&gt;
  </code></pre>
  <blockquote>
  <p>This is where I'm going to be selecting the role for the users, it
  just list roles</p>
  </blockquote>
  <pre><code>                        &lt;h5&gt;Select a role to assign.&lt;/h5&gt;
                          &lt;select value={this.state.personnel} onChange={this.handleChange}
                              style={{ width: 265 + 'px', fontSize: 20 + 'px' }} name=&quot;personnel&quot;&gt;
                              {Object.keys(Role).map(r =&gt; &lt;option value={r}&gt;{Role[r]}&lt;/option&gt;)}
                          &lt;/select&gt;
                          &lt;br /&gt;
                          &lt;Button style={{ marginLeft: 100 + 'px' }}&gt;Submit &lt;/Button&gt;
                      &lt;/form&gt;
                      &lt;Container className=&quot;personnelTable&quot;&gt;
                          &lt;Table size=&quot;sm&quot; striped &gt;
                              &lt;thead&gt;
                                  &lt;tr &gt;
                                      &lt;th&gt;&lt;h5&gt;Name&lt;/h5&gt;&lt;/th&gt;&lt;th&gt;&lt;h5&gt;Email&lt;/h5&gt;&lt;/th&gt;&lt;th&gt;&lt;h5&gt;Role&lt;/h5&gt;&lt;/th&gt;
  
                                  &lt;/tr&gt;
                              &lt;/thead&gt;
  </code></pre>
  <blockquote>
  <p>This is where I'm listing the value for testing purpose which is the
  _id of the users that were selected from the multi selelect element above</p>
  </blockquote>
  <pre><code>                            {this.state.selected.map(value =&gt; (
                                  &lt;tr&gt;
                                      {value}
                                  &lt;/tr&gt;
                              ))}
                          &lt;/Table&gt;
                          &lt;TablePagination
                              currentPage={currentPage}
                              pagesCount={this.pagesCount}
                              handlePageClick={this.handlePageClick}
                          /&gt;
                      &lt;/Container&gt;
                  &lt;/Container&gt;
  
              &lt;/div &gt;
          )
      }
  
  }
  const mapStateToProps = (state) =&gt; ({
      users: state.users,
      user: state.users
  })
  
  export default connect(mapStateToProps, { getUsers, getUser })((ManageRoleAssignment))
  </code></pre>