title: React-Native: Pass data to redux action to fetch API result
body: <p>I have a component from where I am calling an action to fetch results from API, based on a data:</p>
  
  <p>On press of this component:</p>
  
  <p>Calling the fetchProducts() function on componentWillMount.</p>
  
  <p>This below function is called:</p>
  
  <pre><code>fetchProducts(){
     this.props.fetchProductsHomeFromAPI({city:'ABCD'});
  }
  </code></pre>
  
  <p>the mapDispatchToProps is something like this:</p>
  
  <pre><code>function matchDispatchToProps(dispatch){
      return bindActionCreators({selectLocation: selectLocation, fetchProductsHomeFromAPI: fetchProductsHomeFromAPI}, dispatch);
  }
  </code></pre>
  
  <p>The actions is as:</p>
  
  <pre><code>var FETCHING_PRODUCTS="FETCHING_PRODUCTS";
  var FETCHING_PRODUCTS_SUCCESS = "FETCHING_PRODUCTS_SUCCESS";
  var FETCHING_PRODUCTS_FAILURE = "FETCHING_PRODUCTS_FAILURE";
  var API = "https://api.abcd.in/get-home-products";
  
  export function fetchProductsHomeFromAPI(data) {
      return (dispatch) =&gt; {
          dispatch(getProducts())
          fetch(`${API}`, {
                      method: 'POST',
                      headers: {
                          'Accept': 'application/json',
                          'Content-Type': 'application/json',
                      },
                      body: JSON.stringify({
                          city: data.city
                      })
                  })
          .then(res =&gt;res.json())
          .then(json =&gt;dispatch(getProductsSuccess(json.results)))
          .catch(err =&gt; dispatch(getProductsFailure()))
      }
  }
  
  function getProducts() {
      return {
          type : FETCHING_PRODUCTS,
      }
  }
  
  function getProductsSuccess(data) {
      return {
          type : FETCHING_PRODUCTS_SUCCESS,
          data
      }
  }
  
  function getProductsFailure(  ) {
      return {
          type : FETCHING_PRODUCTS_FAILURE,
      }
  }
  </code></pre>
  
  <p>The combine reducer is :</p>
  
  <pre><code>import {combineReducers} from 'redux';
  import LocationReducer from './reducer-location';
  import ActiveLocationReducer from './reducer-active-location';
  import productsHome from './reducer-products-home';
  
  export default combineReducers({
      location: LocationReducer,
      activeLocation: ActiveLocationReducer,
      productsHome : productsHome,
  })
  </code></pre>
  
  <p>In index.android.js store is like this:</p>
  
  <pre><code>import { persistStore, autoRehydrate } from 'redux-persist'
  import { Provider } from 'react-redux';
  import {createStore, compose } from 'redux';
  import combineReducers from './src/Redux/reducers/combineReducers';
  
  const store = compose(autoRehydrate())(createStore)(combineReducers)
  persistStore(store, {storage: AsyncStorage}, () =&gt; {
    console.log(store);
  })
  
  
  export default class MyApp extends Component {
    render() {
      return (
        &lt;Provider store = {store}&gt;
          &lt;App /&gt;
        &lt;/Provider&gt;
      );
    }
  }
  </code></pre>
  
  <p>I am getting this error is <strong>Actions must be plain objects. Use custom middleware for async actions.</strong></p>
  
  <p>Please help me to know this error. <strong>Can't I pass data to my actions ?</strong> </p>
  
  <p><strong>Another question is , can I use another action's data in this action ?</strong></p>