React native Redux dispatch is not a function, dispatch is an instance of Object

Question

When dispatch is called I get an error - 'dispatch is not a funcion ... dispatch is an instance of Object' I have connected mapDispatchToProps and I don't know how to fix this (I am new to react and redux) Here is my code:

import React from 'react';
import {Text, View} from 'react-native';
import Slider from 'react-native-slider';
import { connect } from "react-redux";

class SliderComponent extends React.Component{
    constructor(props){
        super(props)

        this.state={
            sliderValue: this.props.val,
            type: this.props.sliderText,
        }
    }

    render(){
        return(
            <View style={{alignContent: 'center', flexDirection: 'row', padding: 10, justifyContent: 'center'}}>
                <Text style={{color: 'white', flex: 1, alignContent: 'center', justifyContent: 'center', fontSize: 20, fontWeight: 'bold'}}>{this.state.type}</Text>
                <Slider style={{width: 300, padding: 30, flex: 4}} thumbTintColor='white' step={1} value={this.state.sliderValue} minimumValue={this.props.min} maximumValue={this.props.max} minimumTrackTintColor='#F87883' onValueChange={val => {
                    this.setState({sliderValue: val})
                }
            }
            onSlidingComplete={ val =>
                this.props.changeSliderValue(this.state.type, this.state.sliderValue)
            }
            >
                    </Slider>
                <Text style={{color: 'white', flex: 1, alignContent: 'center', justifyContent: 'center', fontSize: 20, fontWeight: 'bold'}}>{this.state.sliderValue}</Text>
            </View>
        )
    }
};

const mapDispatchToProps = (dispatch) => {
    return{
        changeSliderValue: (type, value) => { dispatch({type: type, value: value}) }
    }
}

export default connect(
mapDispatchToProps
)(SliderComponent);

You can take a look on [this](https://stackoverflow.com/questions/52818617/middlware-is-not-a-function-in-react-native/52819369#52819369 ) for more information. — Vikas S, Oct 22 '18 at 13:07

score 3 · Accepted Answer · edited May 19 '20 at 09:01

connect is implemented in the wrong way, your actual code is

    const mapDispatchToProps = (dispatch) => {
      return {
        changeSliderValue: (type, value) => { 
          dispatch({type: type, value: value});
        }
      }
    }

    export default connect(mapDispatchToProps)(SliderComponent);

but the actual syntax for connect is, 1st parameter mapStateToProps function and 2nd parameter is mapDispatchToProps. Please change connect code as below.

    const mapDispatchToProps = (dispatch) => {
      return {
        changeSliderValue: (type, value) => { 
          dispatch({type: type, value: value});
        }
      }
    }

    const mapStateToProps = (state) => null;

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

in case if anyone is looking to return an empty object, use this `const mapStateToProps = state => ({});`. — kenmistry, May 19 '20 at 02:38

Jimi Pajala · Answer 2 · 2018-10-22T10:59:52.580

In your mapDispatchToProps function using connect, 1st parameter that you are referring to is Redux store -object.

const mapDispatchToProps = (
  state,  // This is Redux state object
  dispatch,
) => {

https://gist.github.com/heygrady/c6c17fc7cbdd978f93a746056f618552

import { connect } from 'react-redux'

import { honk } from '../modules/goose/actions' // <-- action creator
import SomeButton from './SomeButton'

const mapStateToProps = undefined

const mapDispatchToProps = undefined // <-- we're focusing on this one

// hook the props of SomeButton to the redux store
const SomeButtonContainer = connect( // <-- create a container
  mapStateToProps,
  mapDispatchToProps
)(SomeButton) // <-- child component

export default SomeButtonContainer

Like in this example, 2nd parameter would be what you want.

score 0 · Answer 3 · answered Oct 22 '18 at 12:28

0

It seems that adding mapStateToProps has made it work

answered Oct 22 '18 at 12:28

Billy Bromell

45
7

React native Redux dispatch is not a function, dispatch is an instance of Object

3 Answers3