example.jsx

import React, { Component } from 'react';

export default class SampleClass extends Component {
  constructor(props) {
    super(props)
  }
  
  componentDidMount() {
    //this is action, and you need to set up bindActionCreators if you wanna use action directory.
    this.props.fetchDogApi()
  }
  
  render() {
    return <div>something</div>
  }
}

// constant
const FETCH_DOG_API = 'FETCH_DOG_API'
const SUCCESS_LOAD = 'SUCCESS_LOAD'

// action
const fetchDogApi = () => ({
  type: FETCH_DOG_API
})

const successLoad = ({payload}) => ({
  type: SUCCESS_LOAD,
  payload
})

// reducer
const reducer = (state, action) => {
  if(action.type === SUCCESS_LOAD) {
    const param = {...state, ...action.payload}
    return param,
  }
  return state
}

//saga.js

function* dogRequest() {
  while(true) {
    const action = yield take(FETCH_DOG_API);
    const request = await fetch('PATH_TO_DOGAPI')
    const json = await request.json()
    put(successLoad(json))
  }
}

function* rootSaga() {
  yield fork(dogRequest);
}