import useSagaReducer from 'use-saga-reducer'
import {takeLatest, call, put} from 'redux-saga/effects'

function* dataFetcher() {
  try {
    const data = yield call(API.fetchData)
    yield put({type: 'FETCH_SUCCESS', payload: data})
  } catch (error) {
    yield put({type: 'FETCH_ERROR'})
  }
}

function* dataFetchingSaga() {
  yield takeLatest('FETCH', dataFetcher)
}

function reducer(state = {}, action) {
  if (action.type === 'FETCH_SUCCESS') {
    return action.payload
  }

  return state
}

const DataFetchingComponent: React.FC = () => {
  const [state, dispatch] = useSagaReducer(dataFetchingSaga, reducer)

  return (
    <>
      <pre>{state}</pre>
      <button onClick={() => dispatch({type: 'FETCH'})}>Fetch Data</button>
    </>
  )
}