1

我正在尝试在 redux 操作后导航到上一个屏幕。我正在react-router使用react-router-redux和redux-loop。

这是场景：

  1. 在主屏幕上有一个用户列表/home。
  2. 点击用户以转到他们的个人资料/home/profile/1234。
  3. 编辑用户名并点击保存this.props.dispatch(UserState.updateUser(id, user, history)。
  4. 用户更新成功后，返回主屏幕/home。

这是一些代码：

看法：

saveProfile = () => {
  const user = {
    name: this.state.name
  }
  this.props.dispatch(UserState.updateUser(this.state.id, user, this.props.history))
}

行动：

export function updateUser(id, user, history) {
  return {
    type: UPDATE_USER,
    payload: {
      id,
      user,
      history
    }
  }
}

减速器：

case UPDATE_USER:
  return loop(
    state.updateIn(['users', action.payload.id], user => user.merge(fromJS(action.payload.user))),
    Effects.constant(action.payload.history.goBack())
  )

这会导致错误Reducers may not dispatch actions。

在另一个项目中，我使用redux-saga并能够成功地将历史对象传递给 saga 和 push/goBack。尝试传递历史对象并在其中调用它似乎发生了一些事情redux-loop

我正在为现有生产应用程序的更新导航系统开发 POC，因此redux-loop需要使用。

任何提示/帮助将不胜感激。如果我遗漏任何有用的代码，请告诉我。

4

1 回答 1

1

我认为@bradford-medeiros 关于这个问题是正确的

Effects.constant(action.payload.history.goBack())

这是一个副作用，所以它不应该发生在减速器中。您不需要传递历史对象。

不确定react-router-redux您拥有的是什么版本，但它通常会公开一些可能导致您想要的更改的操作。

import {goBack} from 'react-router-redux';


//in reducer
return loop(
   state.updateIn(['users', action.payload.id], user => user.merge(fromJS(action.payload.user))),
   Effects.constant(goBack())
);
于 2018-04-20T23:15:29.537 回答