CODEWITHSUNDEEP
reactjsreduxreact-redux
Shamim Fahad
Shamim Fahad

Reputation: 130

TypeError: Redux Action is not a function

I was trying to dispatch a redux action(setMarker) into a component with mapDispatchToProps, but whenever I invoke that action I get this

TypeError: setMarker is not a function

import React from 'react';
import { connect } from 'react-redux';

import { setMarker } from '../../redux/map/map.actions';

import './suggestion.styles.scss';

const Suggestion = (location, { setMarker }) => {
  const { area, city, address } = location;

  return (
    <div className="suggestion" onClick={() => console.log(setMarker)}>
      <i className="fas fa-map-marker-alt fa-2x"></i>
      <div className="address">
        <h3 className="location-title">{`${area}, ${city}`}</h3>
        <p className="location-desc">{address}</p>
      </div>
    </div>
  );
};

const mapDispatchToProps = {
  setMarker,
};

export default connect(null, mapDispatchToProps)(Suggestion);

My actions file contains the following code 

import mapActionTypes from './map.types';

export const setMarker = (location) => ({
  type: mapActionTypes.SET_MARKER,
  payload: location,
});

And my reducer file contains the following code

import mapActionTypes from './map.types';

const INITIAL_STATE = {
  location: {
    lat: 23.810331,
    lng: 90.412521,
  },
};

const mapReducer = (state = INITIAL_STATE, action) => {
  switch (action.type) {
    case mapActionTypes.SET_MARKER:
      return {
        ...state,
        location: action.payload,
      };

    default:
      return state;
  }
};

export default mapReducer;

Upvotes: 0

Views: 1721

Answers (2)

Ramesh Reddy
Ramesh Reddy

Reputation: 10652

If Suggestion is a react component in the functional form then you would get props as an argument. You should use object destructuring syntax if you want to access them directly or you can use props.setMarker.

const Suggestion = ({location, setMarker}) => {
  const { area, city, address } = location;

  return (
    <div className="suggestion" onClick={() => setMarker(location)}>
      <i className="fas fa-map-marker-alt fa-2x"></i>
      <div className="address">
        <h3 className="location-title">{`${area}, ${city}`}</h3>
        <p className="location-desc">{address}</p>
      </div>
    </div>
  );
};

Upvotes: 2

Red Baron
Red Baron

Reputation: 7642

you need to import it like this: { setMarker } so that it becomes a destructured prop

or you could do

const Suggestion = (props) => {

then call

props.setMarker()

also if you want another tip, you can do this for mapDispatch now

const mapDispatchToProps = {
    setMarker
}

much easier to read :)

Upvotes: 4

Related Questions