Update and Delete request with redux-saga

action-creators.js

// Again, you just move this functions to the ones you already have to creating and reading
import { DELETE_SUCCESS, UPDATE_SUCCESS } from 'path/to/constants';

export const updateSuccess = (id, newUpdate) => {
  return {
    type: UPDATE_SUCCESS,
    id,
    newUpdate
  }
}

export const deleteSuccess = (id) => {
  return {
    type: DELETE_SUCCESS,
    id
  }
}
    
    

constants.js

// Other constants. You decide how you want to go about it but I don keep mine a separate file for easy manageability
export const DELETE_SUCCESS = 'DELETE_SUCCESS';
export const UPDATE_SUCCESS = 'UPDATE_SUCCESS';

Instructions.js

/*
1) Depending on your experience, this is all you might need to do to hook up your workflow
2) Remember, not to copy and paste. My idea is to show you how things fit it to you can tailor it to your application

GRACIAS 💪
*/

reducer.js

// import your constants here
// Reducer
const initialState = {
   todos: []
}
export default (state, action) => {
  switch(action.type) {
    case CREATE_SUCCESS:
      return { ...state, /* add the new item to the state here */};
    case UPDATE_SUCCESS:
      /* there are two approach for this:
       1) make a get request after you've updated it in the server (That's two api calls)
       2) Simply update the the item in your redux stor after successfull update on the server.
      */
      return {
        ...state,
        state.todos.slice(0, action.id), // This gets the first part of the todos array
        ...action.newUpdate, // Update the todo item here
        state.todos.slice(action.id + 1) // This takes care of the second part of the todos list
      }
    case DELETE_SUCCESS:
      const newState = state.filter(todo => todo.id !== action.id); // Use filter method to remoreove the item that has been deleted from the st
      return newState;
    default:
      return state;
 }
      

remote.js

function updateTodoAPI (id, data) {
  return fetch(`/path/to/update/endpoint/${id}`, {
    method: 'PUT',
    body: JSON.stringify(data)
  })
  .then(res => res.json())
  .catch(err => throw err);
}

function deleteTodoAPI (id) {
  return fetch(`/path/to/delete/endpoint/${id}`, {
    method: 'DELETE'
  })
  .then(res => res.json())
  .catch(err => throw err);
}

saga.js

/// Other stuff goes here
import { takeEvery, call, put } from 'redux-saga/effects';
import * as API from 'path/to/remote.js' /// So, you can now use this functions that makes ajax calls in your sagas.

function* updateTodo ({ id, data }) {
  try {
    // Ensure that your API returns the data of the updated todo
    const newData = yield call(Your-API-Method, id, data); // Refer sample to api calls in remote.js file
    yield put(updateSuccess(id, newData) // pass in the id you updated and the newData returned from the API
    /// Other things can go here depending on what you want
  } catch (e) {
    // Handle your errors here
  }
}
  
function* deleteTodo ({ id }) {
  try {
    // Ensure that your API returns the data of the updated todo
    const newData = yield call(Your-API-Method, id); // Refer sample to api calls in remote.js file
    yield put(deleteSuccess(id) // pass in the id you updated and the newData returned from the API
    /// Other things can go here depending on what you want
  } catch (e) {
    // Handle your errors here
  }
}
  
  
// Create a watcher to listen to UPDATE and DELETE request from the client(REACT)
  
funtion* updateWatcher() {
  takeEvery('UPDATE_REQUEST', updateTodo) // Remember to create an action that returns this action type(UPDATE_REQUEST);
}
  
funtion* updateWatcher() {
  takeEvery('DELETE_REQUEST', deleteTodo) // Remember to create an action that returns this action type(DELETE_REQUEST);
}
  
// Add this two functions to your root saga so everything is wired up with your reducer.