A simple redux-saga API call example for ReactJS

actions.js

//action
export const GET_USERS_FETCH = 'GET_USERS_FETCH';
export const GET_USERS_SUCCESS = 'GET_USERS_SUCCESS'; //will be called when we finish the API call successfully


//action creator: This will trigger our middleware
export const getUsersFetch = () => ({
    type: GET_USERS_FETCH
});

Home.js

import { useDispatch, useSelector } from 'react-redux';
import { getUsersFetch } from './actions';

function Home() {

  const dispatch = useDispatch();
  const users = useSelector(state => { return state.myFirstReducer.users }); //this grabs the users list we have create in our reducer

  return (
    <div className="Home">
      <h1>Users</h1><br />
      <button onClick={() => dispatch(getUsersFetch())}>Call API</button>
      <hr />

      <div>
        {users && users.map((user => (<div key={user.id}>{user.name}</div>)))}
      </div>
    </div>
  );
}

export default Home;

index.js

import React from 'react';
import ReactDOM from 'react-dom/client';
import Home from './Home';

import { Provider } from "react-redux";
import { combineReducers, configureStore } from "@reduxjs/toolkit";
import createSagaMiddleware from '@redux-saga/core';

import myFirstReducer from './reducer';
import mySaga from './sagas';

const root = ReactDOM.createRoot(document.getElementById('root'));

const sagaMiddleware = createSagaMiddleware();
const rootReducer = combineReducers({ myFirstReducer });
const store = configureStore({ reducer: rootReducer, middleware: [sagaMiddleware] });

sagaMiddleware.run(mySaga);

root.render(
  <React.StrictMode>
    <Provider store={store}>
      <Home />
    </Provider>
  </React.StrictMode>
);

reducer.js

import { GET_USERS_SUCCESS, GET_USERS_FAILURE } from "./actions";

const myFirstReducer = (state = {}, action) => {
    switch (action.type) {
        case GET_USERS_SUCCESS: return {...state, users: action.users}
        default: return state
    }
}

export default myFirstReducer;

sagas.js

import { call, put, takeEvery } from 'redux-saga/effects';
// call is used to call an API
// put is used to call an action

import { GET_USERS_FETCH , GET_USERS_SUCCESS } from './actions';
import axios from 'axios';

function userFetch() {

    // return fetch('https://jsonplaceholder.typicode.com/users').then(response => response.json()); //if you're not using axios

    return axios.get('https://jsonplaceholder.typicode.com/users').then((res) => {
        return res.data;
    })

}


function* workGetUsersFetch() {

    try {
        const users = yield call(userFetch); //yield will wait for this call to finish before procedding to the next line.
        yield put({ type: GET_USERS_SUCCESS, users }); //once the users have been retrived this will put them in the action GET_USERS_SUCCESS. We'll handle the GET_USERS_SUCCESS in our reducer.
    } catch (error) {
        alert(error);
    }
}

function* mySaga() {
    yield takeEvery(GET_USERS_FETCH, workGetUsersFetch);
}

export default mySaga;