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）=＆gt; {return uid}

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

我的有效负载应该只返回uid，我可以简单地返回而不是调用changeUid。但是，我包含这段代码，说一旦用户点击用户名，我就可以在changeUid中调用console.log（），但我的redux工具永远不会触发＆＃39; UPDATE_UID＆＃39;我的商店永远不会更新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的函数以及一个接收dispatch并返回使用它的对象的函数。像这样：

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

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

然后您在onClick中调用props.dispatchChangeUID链接。

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

1 个答案: