Redux saga fetch example

actions.js

export const PUT_DATA = "PUT_DATA";
export const LOAD_DATA = "LOAD_DATA";

export const putData = dataFromServer => {
    return {
        type:PUT_DATA,
        payload:dataFromServer
    }
}
export const loadData = () => {
    return {
        type: LOAD_DATA,
    }
}

App.js

import React from 'react';
import { Connected } from "./Connected";

function App() {
  
  return (
    <div className="App">
      <Connected />
    </div>
  );
}

export default App;

Connected.js

import React from "react";
import { useDispatch } from "react-redux";
import { putData, loadData } from "./actions";

export const Connected = _ => {
    const dispatch = useDispatch();
    const click = _ => dispatch(loadData());

    return (
        <div>
            <button onClick={click}>Click me</button>
        </div>
    )
}

index.js

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
import { Provider } from "react-redux";
import { createStore, applyMiddleware } from "redux";
import * as serviceWorker from './serviceWorker';
import { reducer } from "./reducers";
import logger from "redux-logger";
import createSagaMiddleware from "redux-saga";
import { watchLoadData } from './sagas';

const sagaMiddleware = createSagaMiddleware();

const store = createStore(reducer, applyMiddleware(logger, sagaMiddleware));
sagaMiddleware.run(watchLoadData);

ReactDOM.render(
        <Provider {...{store}}>
            <App />    
        </Provider>, document.getElementById('root'));

// If you want your app to work offline and load faster, you can change
// unregister() to register() below. Note this comes with some pitfalls.
// Learn more about service workers: https://bit.ly/CRA-PWA
serviceWorker.unregister();

reducers.js

import { PUT_DATA } from "./actions";

const initialState = {
    data: {}
}

export const reducer = (state = initialState, action) => {
    if(action.type === PUT_DATA){
        return {
            ...state,
            data: action.payload
        }
    }
}

sagas.js

import { takeEvery,call, put } from "redux-saga/effects";
import { LOAD_DATA, putData } from "./actions";

function fetchdata(){
    return fetch('https://jsonplaceholder.typicode.com/todos/1')
        .then(response => response.json());
}

function* workerLoadData(){
    const res = yield call(fetchdata);
    
    yield put(putData(res));
}

export function* watchLoadData(){
    yield takeEvery(LOAD_DATA, workerLoadData);
}