title: How to call sagas in order on component?
body: <p><strong>problem</strong></p>
  
  <p>I want to call <code>func()</code> when I press a <code>increase_number and decrease_number</code> button, but I don't know how to do that.</p>
  
  <p>Can I do that? (It increases a number and then decreases.)</p>
  
  <p>Or do I have to create a new action and saga?</p>
  
  <p>Thanks for reading !</p>
  
  <p><strong>source code</strong></p>
  
  <p>Redux(with sagas)</p>
  
  <pre><code>import { createAction, handleActions } from 'redux-actions';
  import { delay } from 'redux-saga';
  import { all, put, select, takeEvery } from 'redux-saga/effects';
  
  export const action_creators = {
      increase_number: createAction('increase_number'),
      decrease_number: createAction('decrease_number'),
      set_number_success: createAction('set_number_success')
  };
  
  const state = {
      number: 0
  }
  
  function* increase_number () {
      const state = yield select((state) =&gt; state);
      yield delay(1000);
      yield put(action_creators.set_number_success({ number:++state.number }));
  }
  
  function* decrease_number() {
      const state = yield select((state) =&gt; state);
      yield put(action_creators.set_number_success({ number:--state.number }));
  }
  
  export function* saga() {
      yield all([
          takeEvery('increase_number', increase_number),
          takeEvery('decrease_number', decrease_number)
      ]);
  }
  
  export default handleActions({
      set_number_success: (state, action) =&gt; {
          const new_number = action.payload.number;
          console.log(new_number);
          return { ...state, number:new_number };
      }
  }, state);
  </code></pre>
  
  <p>Component</p>
  
  <pre><code>import * as React from 'react';
  import { connect } from 'react-redux';
  import { bindActionCreators } from 'redux';
  import { put, take } from 'redux-saga/effects';
  import { action_creators } from './redux';
  
  function* func () {
      yield put(action_creators.increase_number());
      yield take(action_creators.set_number_success());
      yield put(action_creators.decrease_number());
  }
  
  class App extends React.PureComponent {
      render() {
          return [
              &lt;div&gt;{this.props.number}&lt;/div&gt;,
              &lt;button type="button" onClick={() =&gt; this.props.increase_number()}&gt;increase_number&lt;/button&gt;,
              &lt;button type="button" onClick={() =&gt; this.props.decrease_number()}&gt;decrease_number&lt;/button&gt;,
              &lt;button type="button"&gt;increase_number and decrease_number&lt;/button&gt; &lt;= Here.
          ]
      }
  }
  
  function map_state_to_props(state) {
      return {
          number: state.number
      }
  }
  
  function map_dispatch_to_props(dispatch) {
      return bindActionCreators({
          increase_number: action_creators.increase_number,
          decrease_number: action_creators.decrease_number
      }, dispatch);
  }
  
  export default connect(map_state_to_props, map_dispatch_to_props)(App);
  </code></pre>
  
  <p><a href="https://codesandbox.io/s/18v577kl9j" rel="nofollow noreferrer">URL for test</a></p>