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](stackoverflow.com/questions/52818617/… ) for more information. — Vikas S
– Vikas S, Commented Oct 22, 2018 at 13:07

kenmistry · Accepted Answer · 2020-05-19 09:01:31Z

3

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);

edited May 19, 2020 at 9:01

kenmistry

2,1731 gold badge24 silver badges31 bronze badges

answered Oct 22, 2018 at 11:00

Raj Kumar N

7937 silver badges24 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

kenmistry Over a year ago

in case if anyone is looking to return an empty object, use this const mapStateToProps = state => ({});.

Jimi Pajala · Accepted Answer · 2018-10-22 10:59:52Z

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.

Billy Bromell · Accepted Answer · 2018-10-22 12:28:39Z

0

It seems that adding mapStateToProps has made it work 👍

answered Oct 22, 2018 at 12:28

Billy Bromell

551 silver badge7 bronze badges

Collectives™ on Stack Overflow

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

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related