fetch function doesn't called with react-redux

Question

I want to call a rest api with react-redux but my fetch doesn't called at all.

My actions:

restActions.js file:

export const customerbyidGetAction = (data) => ({ type: types.customerbyidGetAction, data });

My reducer:

restReducer.js file:

import { Map, fromJS } from 'immutable';
import * as types from '../constants/restConstants';

const initialState = {};
const initialImmutableState = fromJS(initialState);
export default function reducer(state = initialImmutableState, action) {
    switch(action.type) {
        case types.customerbyidGetAction:
            return {
                ...state,
                data: action.payload
            }
        break;

        default:
            // the dispatched action is not in this reducer, return the state unchanged
            return state;
    }
}

restApi.js file:

import {customerbyidGetAction} from '../../redux/actions/restActions'

const URL = "https://***"



export default  function customerbyidGet() {
    
    return dispatch => {
        console.log("not called")
        dispatch(customerbyidGetAction());
        fetch(URL + 'customer/byid/Get',{
            method:'POST',
            headers:{
                'Accept': 'application/json',
                'Content-Type': 'application/json',
                'token':1234
            },
            body: JSON.stringify({'customerId': 1})
        })
        .then(res => {
            const r = res.json();
            return r;
        })
        .then(res => {
            if(res.error) {
                throw(res.error);
            }
            dispatch(customerbyidGetAction(res));
            return res;
        })
        .catch(error => {
            dispatch(customerbyidGetAction(error));
        })
    }
}



export default apis;

inside my Component:

import React from 'react';
import { Helmet } from 'react-helmet';
import Grid from '@material-ui/core/Grid';
import { connect } from 'react-redux';
import { bindActionCreators } from 'redux';
import { withStyles } from '@material-ui/core/styles';
import PropTypes from 'prop-types';
import {
  Help, InsertDriveFile,
  MonetizationOn,
  Person,
  PersonPin,
  RemoveRedEye
} from '@material-ui/icons';

import { Link } from 'react-router-dom';
import CounterWidget from '../../../components/Counter/CounterWidget';
import colorfull from '../../../api/palette/colorfull';
import styles from '../../../components/Widget/widget-jss';
import PapperBlock from '../../../components/PapperBlock/PapperBlock';
import {customerbyidGetAction} from '../../../redux/actions/restActions';


class Panelclass extends React.Component {


  componentDidMount(){
    const {customerbyidGet} = this.props;
   customerbyidGet()
  }
  

  render() {
    const { classes } = this.props;

    return (
      <div>
 Hi
      </div>
    );
  }
}

Panelclass.propTypes = {
  classes: PropTypes.object.isRequired,
  customerbyidGet: PropTypes.func.isRequired,
};

// const mapStateToProps = state => ({
//   customers: customerbyidGet(state),
// })

const mapDispatchToProps = dispatch => bindActionCreators({
  customerbyidGet: customerbyidGetAction
}, dispatch)

const Panel = connect(
  //mapStateToProps,
  null,
  mapDispatchToProps
)(Panelclass);

export default withStyles(styles)(Panel);

Answer 1

The other two answers are pointing out good points, but missing something very crucial: That ; there is a typo.

    const {customerbyidGet} = this.props;
   customerbyidGet()

should be

    const {customerbyidGet} = this.props.customerbyidGet()

Answer 2

Your reducer expects payload property in action:

function reducer(state = initialImmutableState, action) {
  switch (action.type) {
    case types.customerbyidGetAction:
      return {
        ...state,
        data: action.payload, // Here
      };
  }
}

So, you need to have that property in action creator:

const customerbyidGetAction = (data) => ({
  type: types.customerbyidGetAction,
  payload: data, // Here
});

Also, you need to fix the correct action import in component:

import { customerbyidGet } from "../path-to/restApi";

const mapDispatchToProps = (dispatch) =>
  bindActionCreators(
    {
      customerbyidGet,
    },
    dispatch
  );

PS: Today, you should use the Redux Toolkit library which reduces lots of boilerplate code.

Answer 3

First of all define your rest api function like below

export default  function customerbyidGet(dispatch) {
    
    return () => {
        console.log("not called")
        dispatch(customerbyidGetAction());
        fetch(URL + 'customer/byid/Get',{
            method:'POST',
            headers:{
                'Accept': 'application/json',
                'Content-Type': 'application/json',
                'token':1234
            },
            body: JSON.stringify({'customerId': 1})
        })
        .then(res => {
            const r = res.json();
            return r;
        })
        .then(res => {
            if(res.error) {
                throw(res.error);
            }
            dispatch(customerbyidGetAction(res));
            return res;
        })
        .catch(error => {
            dispatch(customerbyidGetAction(error));
        })
    }
}

Then pass it to your mapDispatchToProps function

const mapDispatchToProps = dispatch => bindActionCreators({
  customerbyidGetData: customerbyidGet(dispatch)
}, dispatch)

And finally`invoke it in mapDispatchToProps

componentDidMount(){
 const {customerbyidGetData} = this.props;
 customerbyidGetData()
}