首页 文章

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

提问于
浏览 次
1

我正在使用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);

Action Creator const changeUid =（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是一个空字符串 .

reactjs redux react-redux action react-router-dom

1 回答

  • 0

    看起来你只是在不调用 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 .

    回复于

相关问题