title: Error:Actions must be plain objects.Use custom middleware for async actions. on getting data from firebase
body: <blockquote>
    <p>I am building web app on react redux with firebase. I have two actions
    getUsers and  saveUser as shown in below code. I am able to save the
    user data but unable to get data from firebase.Is mapDispatchToProps
    function  not in correct syntax or in userAction.</p>
    
    <p>UserForm.js</p>
  </blockquote>
  
  <pre><code>import React, { Component } from "react";
  import { connect } from "react-redux";
  import lod from "lodash";
  import { database } from "../config/fbConfig";
  import { getUsers, saveUser } from "../actions/userAction";
  
  class UserForm extends Component {
    constructor(props) {
      super(props);
      this.state = { name: "", email: "", city: "", age: "", users: {} };
      this.submitMessage = this.submitMessage.bind(this);
      this.handleChange = this.handleChange.bind(this);
      this.renderUser = this.renderUser.bind(this);
    }
  
    componentDidMount() {
        this.props.getUsers();
    }
  
    handleChange = e =&gt; {
      this.setState({ [e.target.name]: e.target.value });
    };
  
    submitMessage = e =&gt; {
      e.preventDefault();
      const params = {
        name: this.state.name,
        email: this.state.email,
        city: this.state.city,
        age: this.state.age
      };
      database.push(params);
      this.setState({ name: "", email: "", city: "", age: "" });
    };
  
    renderUser() {
      return lod.map(this.state.users, (user, key) =&gt; {
        return (
          &lt;div key={user.email} className="col-sm-6"&gt;
            &lt;div className="card"&gt;
              &lt;div className="card-body"&gt;
                &lt;h4 className="card-title"&gt;{user.name}&lt;/h4&gt;
                &lt;a href={`mailto:${user.email}`} className="card-link"&gt;
                  {user.email}
                &lt;/a&gt;
              &lt;/div&gt;
            &lt;/div&gt;
            &lt;hr /&gt;
          &lt;/div&gt;
        );
      });
    }
  
    render() {
      return (
        &lt;div className="container"&gt;
          &lt;div className="row"&gt;
            &lt;div className="col-sm-4"&gt;
              &lt;h2&gt;Contact Form&lt;/h2&gt;
              &lt;form onSubmit={this.submitMessage}&gt;
                &lt;label htmlFor="name"&gt;Name&lt;/label&gt;
                &lt;input
                  type="text"
                  className="form-control"
                  name="name"
                  placeholder="Name"
                  value={this.state.name}
                  onChange={this.handleChange}
                /&gt;
  
                &lt;div className="form-group"&gt;
                  &lt;label htmlFor="emai1"&gt;Email&lt;/label&gt;
                  &lt;input
                    type="email"
                    className="form-control"
                    name="email"
                    placeholder="Email"
                    value={this.state.email}
                    onChange={this.handleChange}
                  /&gt;
                &lt;/div&gt;
                &lt;div className="form-group"&gt;
                  &lt;label htmlFor="city"&gt;City&lt;/label&gt;
                  &lt;select
                    className="form-control"
                    name="city"
                    value={this.state.city}
                    onChange={this.handleChange}
                  &gt;
                    &lt;option value="India"&gt;India&lt;/option&gt;
                    &lt;option value="USA"&gt;USA&lt;/option&gt;
                    &lt;option value="UK"&gt;UK&lt;/option&gt;
                    &lt;option value="Japan"&gt;Japan&lt;/option&gt;
                    &lt;option value="Germany"&gt;Germany&lt;/option&gt;
                  &lt;/select&gt;
                &lt;/div&gt;
                &lt;div className="form-group"&gt;
                  &lt;label htmlFor="age"&gt;Age&lt;/label&gt;
                  &lt;input
                    type="number"
                    className="form-control"
                    name="age"
                    placeholder="Age"
                    value={this.state.age}
                    onChange={this.handleChange}
                  /&gt;
                &lt;/div&gt;
                &lt;button type="submit" className="btn btn-primary"&gt;
                  Send
                &lt;/button&gt;
              &lt;/form&gt;
            &lt;/div&gt;
  
            &lt;div className="col-sm-1" /&gt;
  
            &lt;div className="col-sm-7"&gt;
              &lt;div className="row"&gt;
                &lt;h2&gt;User Info&lt;/h2&gt;
                {this.renderUser()}
              &lt;/div&gt;
            &lt;/div&gt;
          &lt;/div&gt;
        &lt;/div&gt;
      );
    }
  }
  
  const mapStateToProps = state =&gt; {
    return {
      users: state.users
    };
  };
  
  const mapDispatchToProps = dispatch =&gt; {
    return {
      saveUser: user =&gt; dispatch(saveUser(user)),
      getUsers: () =&gt; dispatch(getUsers())
    };
  };
  
  export default connect(
    mapStateToProps,
    mapDispatchToProps
  )(UserForm);
  </code></pre>
  
  <blockquote>
    <p>userAction.js</p>
  </blockquote>
  
  <pre><code>  import { GET_USERS } from "../actionTypes";
      import { database } from "../config/fbConfig";
  
      export function getUsers() {
        return dispatch =&gt; {
          database.on("value", snap =&gt; {
            dispatch({
              type: GET_USERS,
              payload: snap.val()
            });
          });
        };
      }
  
      export function saveUser(user) {
        return dispatch =&gt; database.push(user);
      }
  </code></pre>
  
  <blockquote>
    <p>Or is there error in my index.js file</p>
  </blockquote>
  
  <pre><code>import React from "react";
  import ReactDOM from "react-dom";
  import { createStore, applyMiddleware, compose } from "redux";
  import { Provider } from "react-redux";
  import thunk from "redux-thunk";
  
  import "./index.css";
  import App from "./App";
  import * as serviceWorker from "./serviceWorker";
  import rootReducer from "./reducers";
  
  const store = createStore(rootReducer);
  
  ReactDOM.render(
    &lt;Provider store={store}&gt;
      &lt;App /&gt;
    &lt;/Provider&gt;,
    document.getElementById("root")
  );
  
  serviceWorker.unregister();
  </code></pre>