CRUD опреации actions+reducer+actions React

Всем привет. Начал разбираться с React. Не понимаю, как работает заимосвязь Sagas+Reducers+Actions. У меня сейчас есть только Get запрос:

Actions:

import { createActions } from "reduxsauce";

const { Types, Creators } = createActions({
  loadSongsRequest: ["payload"],
  loadSongsSuccess: ["songs"],
  loadSongsFailure: ["error"],
//add create song (post)
  createSongRequest: ["payload"],
  createSongSuccess: ["song"],
  createSongFailure: ["error"]
  });

const songsActions = {
  Types,
  Creators
};

export default songsActions;

Reducers

import { createReducer } from "reduxsauce";
import actions from "./actions";

const { Types } = actions;

const INITIAL_STATE = {
  isRequesting: false,
  songs: [],
  error: null
};

const request = (state = INITIAL_STATE) => {
  return {
    ...state,
    isRequesting: true,
    error: null
  };
};
const loadSongsSuccess = (state = INITIAL_STATE, { songs }) => {
  return {
    ...state,
    isRequesting: false,
    songs
  };
};


//add post(song)
 const createSongSuccess = (state = INITIAL_STATE, { song }) => {
  return {
    ...state,
    isRequesting: false,
    song
  };
};

const failure = (state = INITIAL_STATE, { error }) => {
  return {
    ...state,
    isRequesting: false,
    songs: null,
    error
  };
};

export const HANDLERS = {
  [Types.LOAD_SONGS_REQUEST]: request,
  [Types.LOAD_SONGS_SUCCESS]: loadSongsSuccess,
  [Types.LOAD_SONGS_FAILURE]: failure,
//add create
  [Types.CREATE_SONG_REQUEST]: request,
  [Types.CREATE_SONG_SUCCESS]: createSongSuccess,
  [Types.CREATE_SONG_FAILURE]: failure
};

export default createReducer(INITIAL_STATE, HANDLERS);

Sagas

import {takeEvery, takeLatest, call, put } from "redux-saga/effects";
import api from "services/api";
import songsActions from "./actions";
import { yellow } from "@material-ui/core/colors";

const {
  Types: { LOAD_SONGS_REQUEST },
  Creators: {
    loadSongsSuccess,
    loadSongsFailure,
//add create
    createSongSuccess,
    createSongFailure

  }
} = songsActions;

function* loadSongs() {
  try {
    const { data } = yield call(api.get, `/api/songs`);
    yield put(loadSongsSuccess(data));
  } catch (error) {
    yield put(loadSongsFailure(error));
    // yield put(setError('Load history error.'));
  }
}


//add create
 function* createSong() {
  try {
    const { data } = yield call(api.post, `/api/songs`);
    yield put(createSongSuccess(data));
  } catch (error) {
    yield put(createSongFailure(error));
  }
}

export function* songsSaga() {
  yield takeLatest(LOAD_SONGS_REQUEST, loadSongs);
  yield takeEvery(CREATE_SONG_REQUEST, createSong);
}

RootReducer

import { combineReducers } from "redux";
import { connectRouter } from "connected-react-router";
import songs from "../store/songs/reducers";
import history from "./history";

const reducers = {
  router: connectRouter(history),
  songs
};

export default combineReducers(reducers);

RootSaga

import { spawn } from "redux-saga/effects";
import { songsSaga } from "./songs/sagas";

export default function*() {
  yield spawn(songsSaga);
}

Получаю дааные через хук useEffect

import React, {useState, useEffect } from "react";
import { Table } from "../shared/Table";
import styles from "./styles.module.css";

export const Songs = ({ songs, loadSongs }) => {
  useEffect(() => { 
    loadSongs();
  }, [loadSongs]);

  const columns = [
    { title: "Name", field: "name" },
    { title: "Genre", field: "genre" },
    { title: "Artist Name", field: "artistName" },
    { title: "Release Date", field: "releaseDate", type: "date" },
    { title: "Album", field: "albumName" }
  ];

  return (
    <div className={styles.tableWrapper}>
      <Table title="Songs" columns={columns} data={songs} />
    </div>
  );
};

Суть вопроса, что я должен написать для post,out, remove запросов... Я пытался разобраться, прочитал много, но не понял ровным счётом ничего. И как мне вызывать данные запросы в таблице : https://material-ui.com/ru/components/tables/ предпоследняя таблица..