baso53

import { combineReducers } from "redux";
 
const actionTypes = {
  "FETCH_DATA_REQUEST": "FETCH_DATA_REQUEST",
  "FETCH_DATA_SUCCESS": "FETCH_DATA_SUCCESS",
  "FETCH_DATA_FAILED": "FETCH_DATA_FAILED"
};
 
const initialState = {
  name: '',

baso53

import { createStore, applyMiddleware } from "redux";
import reducer from "./reducer";
 
const store = createStore(reducer, applyMiddleware());
 
export default store;

baso53

const middleware = store => next => action => {
  console.log(action.type);
}

baso53

export default class MySaga {
  constructor() {
    this.actionWatchList = new Map();
  }

  registerAction(actionType, handler) {
    this.actionWatchList.set(actionType, handler);
  }
};

baso53

...
middleware = store => next => action => {
  const handler = action.type ? this.actionWatchList.get(action.type) : undefined;
  if (handler) {
    // do middleware work
  }
  next(action);
}
...

baso53

...
if (handler) {
  const handlerInstance = handler(action);

  let yieldedValue = handlerInstance.next();

  (async () => {
    while (!yieldedValue.done) {
      switch (yieldedValue.value.effect) {
        case 'effect/CALL':

baso53

export const call = (fn, ...args) => {
  return {
    effect: 'effect/CALL',
    payload: fn,
    args: args
  };
}
 
export const put = (action) => {
  return {

baso53

import { createStore, applyMiddleware } from "redux";
import reducer from "./reducer";
import MySaga from "./middleware";
import { ACTION_TYPES } from './reducer';
 
const sagaInstance = new MySaga();
sagaInstance.registerAction(ACTION_TYPES.FETCH_DATA_REQUEST, fetchDataWorker);
 
const store = createStore(reducer, applyMiddleware(sagaInstance.middleware));
 

baso53

import axios from 'axios';
import { call, put } from './effects';
 
const fetchData = URL => axios.get(URL);
 
export function* fetchDataWorker(action) {
  try {
    const response = yield call(fetchData, `https://uinames.com/api/?gender=${action.payload}`);
 
    yield put({ type: 'FETCH_DATA_SUCCESS', payload: response.data });

baso53

import React from 'react';
import { connect } from 'react-redux';

import { fetchDataRequest } from './actions';
import "./App.css";

const App = props => (
  <React.Fragment>
    <div className='button' onClick={() => props.fetchDataRequest('male')} >
      Fetch a random male name!