redux saga example

saga.js

import React, { Component } from 'react';
import ReactDOM from 'react-dom';
import { createStore, applyMiddleware } from 'redux';
import { connect, Provider } from 'react-redux';
import createSagaMiddleware, { delay } from 'redux-saga';
import { put, takeEvery, all } from 'redux-saga/effects';

function* incrementAsync() {
  yield delay(1000);
  yield put({ type: 'INCREMENT' });
}

function* watchIncrementAsync() {
  yield takeEvery('INCREMENT_ASYNC', incrementAsync);
}

function* rootSaga() {
  yield all([watchIncrementAsync()]);
}

const sagaMiddleware = createSagaMiddleware();

const store = createStore((state = 0, action) => {
  switch (action.type) {
    case 'INCREMENT':
      return state + 1;

    default:
      return state;
  }
}, applyMiddleware(sagaMiddleware));

const action = type => {
  store.dispatch({ type });
};

sagaMiddleware.run(rootSaga);

const Counter = ({ value, onIncrement, onDecrement, onIncrementAsync }) => (
  <div>
    <button onClick={onIncrementAsync}>Increment after 1 second</button>{' '}
    <button onClick={onIncrement}>Increment</button>{' '}
    <button onClick={onDecrement}>Decrement</button>
    <hr />
    <div>Clicked: {value} times</div>
  </div>
);

class Saga extends Component {
  render() {
    return (
      <div>
        Saga
        <Counter
          value={store.getState()}
          onIncrement={() => action('INCREMENT')}
          onDecrement={() => action('DECREMENT')}
          onIncrementAsync={() => action('INCREMENT_ASYNC')}
        />
      </div>
    );
  }
}

const render = () => ReactDOM.render(<Saga />, document.getElementById('app'));
// setState
store.subscribe(render);
render();