如何在不改变状态

时间:2017-03-01 02:08:47

标签: javascript redux redux-thunk

如何在不实际更改状态的情况下使redux操作生效?

我将现有代码移植到redux:当单击注销按钮时,现有函数logout()发出一个注销用户的AJAX请求。如果该请求失败,则会调用alert('Logout failed');在移植的代码中,注销按钮会调用使用redux-thunk实现的操作创建者:

export function logout(email, pass, callback) {
  return function(dispatch) {
    axios.get('/logout')
      .then(function(response) {dispatch({type: 'LOGOUT_SUCCESS'})})
      .catch(function(error) {dispatch({type: 'LOGOUT_FAILURE', message: error.response.data})});
  };
}

reducer处理LOGOUT_SUCCESS操作并从状态中删除用户对象,这是直截了当的。但是我应该处理失败案例并触发alert()吗?

  • 动作创建者可以致电alert(),但不知怎的,我觉得这不是正确的地方
  • reducer可以调用alert()并返回相同的状态......但这似乎是一个坏主意,因为reducers应该是纯函数而没有副作用。
  • reducer可以返回类似{messages: ['Login failed']}的状态,代码的其他部分可以对此做出反应,抛出警报并调用另一个从状态中删除消息的操作。但这似乎不必要地复杂。

对于您希望通过事件触发操作但不更改状态并且您希望将其保留在操作创建者之外的情况,哪种模式有意义?

1 个答案:

答案 0 :(得分:2)

如果登录失败时唯一发生的事情是警报,只需在那里的函数中调用它。

请记住,反应只是简单的JavaScript,不要试图强迫自己进入意识形态;这些模式是指导而非规则。

您可能需要查看redux-saga,它以比thunk更具说明性的方式处理redux副作用。