反应路由器链接，onClick 操作未触发

Question

我正在使用 React Router Dom Link。我想在呈现新页面之前触发一个动作。新页面的 componentDidMount() 生命周期方法取决于用户单击帖子的用户名时触发的操作。

代码示例：

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

handItemClick

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

changeUserUidState 是被调度的动作创建者。我正在使用 mapStateToProp 和 mapDispatchToProp，如下所示

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

动作创建者 const changeUid = (uid) => {return uid}

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

我的有效载荷应该只返回 uid，我可以简单地返回而不是调用 changeUid。但是，我包含这段代码是为了说一旦用户单击用户名，我可以在 changeUid 中使用 console.log()，但是我的 redux 工具永远不会触发 'UPDATE_UID' 并且我的商店永远不会更新 uid。

我怎样才能调用一个动作，但动作的类型永远不会触发？

我的减速器

import initialState from './initialState';

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

并且 userUid 的 intialState 是一个空字符串。

Answer 1

看起来你只是在调用函数而不调用dispatch。

将动作发送到reducer的是调用dispatch。因此，您必须将发送的内容构造为 mapDispatch 到 props 和一个函数，该函数接受调度并返回一个使用它的对象。像这样：

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

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

然后你会在 onClick 中调用props.dispatchChangeUID 来获取链接。