如何在不改变状态的情况下对 redux 操作做出反应

Posted 2023-02-22

【中文标题】如何在不改变状态的情况下对 redux 操作做出反应

【英文标题】：How to react to redux action without changing state

【发布时间】：2017-07-20 04:52:58

【问题描述】：

如何在不实际更改状态的情况下使 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() 并返回相同的状态...但这似乎是个坏主意，因为 reducer 应该是没有副作用的纯函数。 reducer 可以返回类似messages: ['Login failed'] 的状态，并且代码的其他部分可以对此做出反应，抛出警报并调用另一个操作来从状态中删除消息。但这似乎不必要地复杂。

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

【参考方案1】：

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

记住，react 只是普通的 javascript，不要试图强迫自己进入一种意识形态；这些模式是指导方针而不是规则。

您可能想查看redux-saga，它以比 thunk 更具声明性的方式处理 redux 副作用。