Unable to call Actions from class component. Error: This.props.dispatch is not a function, while implementing the reducer

Question

So basically I want to implement this package into my application.

https://github.com/Wolox/react-native-redux-toast

but when I try to follow their approach, I'm getting stuck on this issue.

I stuck because I want to use this toaster library via redux but when i do that I get the error message: this.props.dispatch is not a function. bla bla dispatch undefined.

Heres my code on which I can call Toaster but actions doesnt work:

import React, { Component } from 'react';
import {
  AppRegistry,
  StyleSheet,
  Text,
  ScrollView,
  Button,
  View
} from 'react-native';


import { List, ListItem, Divider } from 'react-native-elements'
import { Icon } from 'react-native-elements';
import { Ionicons } from '@expo/vector-icons';
import * as actions from '../actions';
// import { prioritiesFetch } from '../actions';

import { ToastActionsCreators } from 'react-native-redux-toast';
import { connect } from 'react-redux';

class FollowupScreen extends Component {

  constructor(props){
          super(props);
      }


  componentWillMount(){
    console.log('24---  componentWillMount  in FollowupScreen');
     this.props.prioritiesFetch();
  }




        someFunction = () => {
          console.log(' someFunction called');
          // navigation.navigate('Search');
        }


        static navigationOptions = ({ navigation }) => {

          const {state, setParams} = navigation;
          return {
            title: 'Follow Up',
            tabBarIcon:  ({ tintColor }) => {
                return <Icon name="phone" size={25} color={tintColor} />;
            }
          };
        };


    displayInfoToast = () => {
        console.log( '  65 -  ToastActionsCreators ' ,  ToastActionsCreators );
        console.log('64-  this.props = ', this.props );
      this.props.dispatch(ToastActionsCreators.displayInfo('Info toast!'));
    };


    displayErrorToast = () => {
      console.log( '  65 -  ToastActionsCreators ' ,  ToastActionsCreators );
      console.log('64-  this.props = ', this.props );

        this.props.dispatch(ToastActionsCreators.displayError('Error toast!'));
      };

      displayWarningToast = () => {
          console.log('64-  this.props = ', this.props );
        this.props.dispatch(ToastActionsCreators.displayWarning('Warning toast!'));
      };



    render() {
      const { navigate } = this.props.navigation;

      return (
        <View  style={{ }}>
          <Button title={'Info Toast!'} onPress={this.displayInfoToast} />
          <Button title={'Warning Toast!'} onPress={this.displayWarningToast} />
          <Button title={'Error Toast!'} onPress={this.displayErrorToast} />

          <ScrollView>
            <List>
              <ListItem
                  onPress={() => navigate('allProperties')}
                  title="All Properties                                   199"
                  leftIcon={{name: 'flight-takeoff'}}
                  color="rgba(0,122,255,1)"
              />

              </ScrollView>

        </View>

      );
    }
    }



export default connect(null) (FollowupScreen);

store.js

import { createStore, compose, applyMiddleware } from 'redux';
import thunk from 'redux-thunk';
import reducers from '../reducers';

const store = createStore(
    reducers,
    {},
    compose (
      applyMiddleware(thunk)
  )
);


export default store;

Reducers :

import { combineReducers } from 'redux';
import auth from './auth_reducer';
import Fruits from './FruityFormReducer';
import { reducer as form } from 'redux-form'

import { toastReducer as toast } from 'react-native-redux-toast';

export default combineReducers({
  Fruits,
  toast,
});

If I try to add the actions like below,

export default connect(null, {propertiesFetch}) (FollowupScreen);

or

export default connect(null, actions) (FollowupScreen);

I get this error:

Answer 1

If you want to leave everything as is and just add your functions to the props, remove your functions from component, then remove dispatch call from your functions, because they to return action object and after connect redux wraps this functions with auto-dispatch them after the call (read redux documentation):

const displayInfoToast = () => {
    console.log('  65 -  ToastActionsCreators ', ToastActionsCreators);
    console.log('64-  this.props = ', this.props);
    return ToastActionsCreators.displayInfo('Info toast!'); };

export default connect(null, { displayInfoToast }) (FollowupScreen);

Answer 2

You will not get access to dispatch function in your props. It will be undefined if you pass any argument to connect function. There are two ways to do this.

Way 1

call

connect()(FollowUpScreen) // without any argument to connect function.

Now you can use this.props.dispatch() as you are already doing

Way 2

Do the following (I prefer this):

create a function called mapDispatchToprops

const mapDispatchToProps = (dispatch) => ({
    displayError: (msg) => dispatch(ToastActionsCreators.displayError(msg)),
    displayWarning: (msg) => dispatch(ToastActionsCreators.displayWarning(msg)),
});

You can add other actions in the similar way. Now connect your component with the above function as the argument to connect as follows:

export default connect(null, mapDispatchToprops) (FollowupScreen);

Now this will add following functions in your component props:

displayError(msg) and displayWarning(msg)

you can call them as follows:

this.props.displayError('Error Message');

this.props.displayWarning('Warning !!!');