Example: Data fetching in React component using Redux

ExampleReactWithRedux.js

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

// React Component
const A = props => {
  useEffect(() => {
    // fetch data from a remote server
    props.fetchData()
  }, [props]);

  return (
    <div>{props?.data}</div>
  )
}

const mapStateToProps = state => {data: state?.data};

connect(mapStateToProps, {fetchData})(A);
export {A};


// Action function
const fetchData = async (...arguments) => {
  return dispatch => {
    try {
      // API call
      const data = await getData(arguments);
      dispatch({type: 'DATA_RECEIVED', data});
    } catch (e) {
      console.log(e);
      dispatch({type: 'ERROR'});
    }
   
  }
}

// Reducer function
const reducerA = (state={}, action) => {
  switch(action.type) {
    case 'DATA_RECEIVED':
       return {
          state,
          ...action.payload
       }
    default:
       return state;
  }
}