Cfrgtkky

I am calling api with redux action, so i created the reducers, action and store. But when i calling the redux action from the view part. I am getting the following error.

this.props.dispatch is not a function

Below is my reducer, actions and view part(React) Code which can help you to understand the code.

Note: when i console.log(this.props), I am not getting dispatch() function.

actions.js

import { 

 FETCH_WORKS_SUCCESS,

 FETCH_WORKS_FAILURE

} from './actionTypes'



export function fetchFeaturedWork(){

  return dispatch => {

   return fetch("https://api.com/api/wp-json/customapi/all_posts?category=work&featured=true")

   .then(res => res.json())

   .then(json => {

     dispatch(fetchFeaturedWorkSuccess(json.works));

     return json.works;

   })

  };

}



export const fetchFeaturedWorkSuccess = works => ({

   type: FETCH_WORKS_SUCCESS,

   payload: { works }

});

reducer.js

import {

 OPEN_MENU,

 CLOSE_MENU,

 SET_DEVICE_TYPE,

 FETCH_WORKS_SUCCESS,

 FETCH_WORKS_FAILURE

} from '../actions/actionTypes'



const initialState = {

 isMenuOpen: null,

 isMobile: false,

 error:null,

 works: 

}



const reducer = (state = initialState, action) => {

 switch (action.type) {

  case OPEN_MENU:

   return {...state, isMenuOpen: true}

  case CLOSE_MENU:

   return {...state, isMenuOpen: false}

  case SET_DEVICE_TYPE: 

   return {...state, isMobile: action.isMobile} 

  case FETCH_WORKS_SUCCESS:

   return {...state,works:action.payload.works}

  case FETCH_WORKS_FAILURE:

   return {...state,error:action.payload.error,works:}

  default:

   return state

 }

}



export default reducer;

store.js

import { createStore, applyMiddleware } from 'redux';

import rootReducer from './reducers/reducer';

import thunk from "redux-thunk";



let store = createStore(rootReducer,applyMiddleware(thunk))

export default store

App.js

import React, { Component } from 'react';

import { Link } from 'react-router-dom';

import Slider from "react-slick";

import Footer from '../footer'

import './index.css';

import { connect } from 'react-redux'

import { openMenu,fetchFeaturedWork } from '../../actions/actionCreators'

import Header from '../header'

import arrowRight from '../../images/arrow-right.svg'

import arrowLeft from '../../images/arrow-left.svg'



const mapStateToProps = (state) => ({

  isMobile: state && state.isMobile

})



const mapDispatchToProps = (dispatch, ownProps) => ({

 openMenu: (isMobile) => dispatch(openMenu(ownProps.isMobile))

})



class Work extends Component {

  getImgSlider = (slider) => {

   this.imgSlider = slider

  }

  getTextSlider = (slider) => {

   this.textSlider = slider

  }

  componentDidMount(){

    this.props.dispatch(fetchFeaturedWork());

  }



  render() {

   let className = 'idz_work'

   if (this.props.isMobile) {

     className = 'idle'

   }

   return (

    <div>

     {

      this.props.isMobile ?

        null

        :

        <Link to='/home'>

          <div className='idz_sidebar' style={{ left: 0 }}>

            <div>

              <label>FEATURED</label>

            </div>

          </div>

        </Link>

    }

    <div className={className}>

      {!this.props.isMobile &&

        <Header logo="dark"/>

      }

      <div className="content">

        <label className="light-gray" style={this.props.isMobile ? { fontSize: '1.3rem' } : { fontSize: '2rem' }}>Featured Works</label>

        <hr style={this.props.isMobile ? { marginBottom: '0.5rem', marginTop: '0.5rem' } : {}} />

        <hr style={this.props.isMobile ? { marginBottom: '0.5rem', marginTop: '0.5rem' } : {}} />

        <label className="light-gray" style={this.props.isMobile ? { fontSize: '1.3rem' } : { fontSize: '2rem' }}>All Works</label>

        <hr style={this.props.isMobile ? { marginBottom: '0.5rem', marginTop: '0.5rem' } : {}} />

        <hr />

      </div>

      {this.props.isMobile ? null : <Footer />}

    </div>

  </div>

);

}

}



export default connect(mapStateToProps, mapDispatchToProps)(Work);

When you use mapDispatchToProps, dispatch is not longer available in props. So, either get rid of mapDispatchToProps and use this.props.dispatch. Or move all dispatch functions to mapDispatchToProps.