Pfthb

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.