React Redux 执行操作的最佳实践答案

【问题标题】：React Redux best practices for performing actionsReact Redux 执行操作的最佳实践
【发布时间】：2018-03-24 16:14:32
【问题描述】：

在 React（和 Redux）中，我应该在哪里执行操作（重定向或添加/删除本地存储中的内容）？因此，在成功更新密码后，我想将用户重定向到另一个页面。我应该在调度方法之后重定向，我应该在组件中执行还是有其他选项？

示例操作：

export function updateAccountPassword(encryptedPassword) {
    return dispatch => {
        axios.post(API_URL + '/account/recovery/update', {
            _id: getSignedInUserID(),
            password: encryptedPassword
        }).then(() => {
            dispatch(updateUserPasswordSuccess())
        }).catch(() => {
            dispatch(updateUserPasswordFailError());
        })
    }
}

function updateUserPasswordSuccess() {
    return({
        type: RECOVERY_UPDATE_SUCCESS
    })
}

function updateUserPasswordFailError() {
    return({
        type: RECOVERY_UPDATE_FAIL_ERROR,
        payload: 'Something went wrong, please try again'
    })
}

【问题讨论】：

标签： reactjs redux redux-thunk

【解决方案1】：

我这样做的方式是将this.props.history.push 作为回调传递给动作创建者，并按照您的建议在调度后在动作创建者中调用它。

这是我的代码中的一个示例：

在组件表单的提交中，调用action creator：

this.props.ACTION_CREATOR(formPayload, () => {
  this.props.history.push(`ROUTING_TARGET`);
});

然后，在动作创建者中，当满足适当的条件时，调用回调（重新路由）。

【讨论】：