title: Is it OK to make a REST API request from within a Redux reducer?
body: <p>I have a React component named <code>ItemList</code> which loads a list of items from an API server and then renders them as a list of <code>Item</code> components.  </p>
  
  <p>Each <code>Item</code> has a delete button.  When the button is clicked, I want to send a request to the API server to delete the item, then re-render the <code>ItemList</code>.</p>
  
  <p>One way I can think of to make that work is to move both API queries into reducers, and then dispatch actions whenever I want to a) get all items; and b) delete an item.  Upon successful completion of those API operations, the reducer will update the store and the <code>ItemList</code> will re-render.  </p>
  
  <p>Is that a reasonable approach, or is it a bad idea to put API calls inside of reducers?</p>
  
  <p>Here's a simplified version of the the code I have so far.  It doesn't yet use Redux.  I want to make sure my approach is sound before implementing Redux, hence this Stack Overflow question.</p>
  
  <p><strong>ItemList.js</strong></p>
  
  <pre><code>class ItemList extends Component {
  
    constructor(props) {
      super(props);
      this.state = {
        items: []
      };
      this.componentDidMount = this.componentDidMount.bind(this);
    }
  
    componentDidMount() {
      const url = 'https://api.example.com/api/v1.0/item';
      fetch(url, {
        method: "get"
      })
      .then(res =&gt; res.json())
      .then(response =&gt; {
        this.setState({items: response.data});
      });
    }
  
    render() {
      &lt;div&gt;
        {this.state.items.map((item, index) =&gt; (
          &lt;Item key={item.id} item={item} /&gt;
        ))}
      &lt;/div&gt;
    }
  }
  </code></pre>
  
  <p><strong>Item.js</strong></p>
  
  <pre><code>class Item extends Component {
  
    deleteClicked() {
      /** 
       *  Is it ok to dispatch a "delete item" action 
       *  from here and then make the actual API call 
       *  in a reducer?
       */
    }
  
    render() {
      &lt;div&gt;
        &lt;h2&gt;{item.title}&lt;/h2&gt;
        &lt;a onClick={this.deleteClicked}&gt;delete item&lt;/a&gt;
      &lt;/div&gt;
    }
  }
  </code></pre>