React Router Link, onClick Action Not Firing

Question

I'm using React Router Dom Link. I'd like to fire an action before I render a new page. The new page's componentDidMount() lifecycle method depends the action firing when a user clicks a username of a post.

code example:

 <Link to={`/Profile/${post.uid}`}
    onClick={(e) => this.handleItemClick(post.uid)}>{post.name}</Link>

handItemClick

handleItemClick = (uid) => {changeUserUidState(uid)}

changeUserUidState is the action creator being dispatched. I am using in line mapStateToProp and mapDispatchToProp like below

export default connect(({posts, userData}) => ({posts, userData}), ({changeUserUidState}))(Feeds);

Action Creator const changeUid = (uid) => {return uid}

export const changeUserUidState = uid => ({
  type: 'UPDATE_UID', payload: changeUid(uid),
});

My payload should only return the uid, which I can simply return rather than invoking changeUid. But, I'm including this code to say that I can console.log() inside of changeUid once the user clicks on a user name, but my redux tools never fire 'UPDATE_UID' and my store never updates the uid.

How can I invoke an action, but the type of action never fires?

my reducer

import initialState from './initialState';

export default function (userUid = initialState.userUid, action) {
  switch (action.type) {
    case 'UPDATE_UID':
      return action.payload;
    default:
      return userUid;
  }
}

and intialState for userUid is an empty string.

Ho does your initial state look like? – Ravindra Ranwala Sep 01 '17 at 01:06 — Ravindra Ranwala, Sep 01 '17 at 01:06

score 0 · Answer 1 · answered Sep 01 '17 at 01:24

0

It looks like you're just invoking the function without calling dispatch.

What sends the action to the reducer is to call dispatch. So you'll have to structure what your sending as mapDispatch to props and a function that takes dispatch and returns an object that uses it. Like this:

const mapDispatch = dispatch => ({
  dispatchChangeUID: (uid) => {
    dispatch(changeUserUidState(uid))
  }
})

export default connect(({posts, userData}) => ({posts, userData}), mapDispatch)(Feeds);

Then you'd call props.dispatchChangeUID in the onClick for the link.

answered Sep 01 '17 at 01:24

DillGromble

383
2
8

@DillGromle, I am using inline mapStateToProp export default connect(({posts, userData}) => ({posts, userData}), ({changeUserUidState}))(Feeds); The second argument in the connect function is the mapStateToProp – Generaldeep Sep 01 '17 at 02:59
Yes, but in the same way that mapState is a function that takes state and returns an object, mapDispatch has to be a function that takes dispatch and then calls it. In your code you are just passing the object and not using dispatch anywhere. – DillGromble Sep 01 '17 at 03:06
I'm using it inside here this.handleItemClick(post.uid)}>{post.name} Like i said in the OP, changeUserUidState is being invoked. I'm reaching my action, and able to console.log from it. But, the type of action "UPDATE_UID" isn't being dispatched. – Generaldeep Sep 01 '17 at 03:23
That's correct, because you have to call the dispatch function and pass in this.handleItemClick. The action creator only creates the action object, dispatch is what passes that object into the reducer – DillGromble Sep 01 '17 at 03:41
Take a look at this post to see if it helps explain a little better. https://stackoverflow.com/questions/39419237/what-is-mapdispatchtoprops – DillGromble Sep 01 '17 at 03:48

React Router Link, onClick Action Not Firing

1 Answers1