React Router с Redux Loop - редукторы не могут отправлять действия
Я пытаюсь перейти к предыдущему экрану после избыточного действия. я использую react-router
с react-router-redux
а также redux-loop
,
Вот сценарий:
- На домашнем экране есть список пользователей
/home
, - Нажмите на пользователя, чтобы перейти к его профилю
/home/profile/1234
, - Измените имя пользователя и нажмите Сохранить
this.props.dispatch(UserState.updateUser(id, user, history)
, - После успешного обновления пользователя вернитесь на начальный экран.
/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
и был в состоянии успешно передать объект истории в сагу и push/goBack. Кажется, что-то происходит с попыткой передать объект истории и вызвать его внутри redux-loop
Я работаю над POC для обновленной навигационной системы для существующего производственного приложения, поэтому работаю с redux-loop
необходимо.
Любые советы / помощь будет принята с благодарностью. Пожалуйста, дайте мне знать, если я пропускаю какой-либо код, который будет полезен.
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())
);