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>
</>
)
}