如何观察 Redux 操作?

Question

我有带有操作的 Redux 存储：

const rootReducer = (state = initialState, action) => {
switch (action.type) {
case SAVE_ORDER_SUCCESS:
return {...state,
order: action.data.order,
completedActionType: SAVE_ORDER,
completionStatus: SUCCESS,
}
case RECALC_ORDER_SUCCESS:
return {...state,
order: action.data.order,
completedActionType: RECALC_ORDER,
completionStatus: SUCCESS,
}
case SAVE_ORDER_ERROR:
return {...state,
order: action.data.order,
completedActionType: SAVE_ORDER,
completionStatus: ERROR,
}   
}       
}       

我的 React 应用程序通常在完成对服务器的请求后调用这些操作 - 在服务器上成功执行或服务器返回一些错误的情况下。我想通过显示成功或错误警报(例如使用 https://www.npmjs.com/package/react-alert(来完成这些操作(例如SAVE_ORDER_SUCCESS(，这些警报会自动淡出，即，我想通过调用完成这些操作，例如this.props.alert.show('...some message...');。当然，我可以尝试将此调用作为我的SAVE_ORDER_SUCCESS和其他操作中的最后一个语句，但我觉得这很糟糕：我想 Redux 操作应该是非可视和非交互式的，并且 UI 组件会侦听某些操作的完成，并且组件可以在事件侦听器中调用此类操作事件alert.show(...)会好得多。但是有没有模式如何在 React 组件或函数组件中创建事件侦听器，如何将这些事件侦听器注册到 Redux 操作，以及这些事件侦听器如何观察 Redux 操作的完成。

我的意图是否有一些意义，这种事件/侦听器/观察者模型是否有 React 模式？

当然，人们很想在组件的getDerivedStateFromProps()中使用state.completedActionType和state.completionStatus，但它并没有走得太远，因为应该通过将它们与以前的值进行比较来跟踪这些值(可以存储在组件的本地状态中(，在这种情况下，在错误操作多次成功的情况下没有工作场景。

我知道从 Redux reducer 发出事件(不幸的是，这个好问题很少受到关注(关于自定义事件数组的想法，但我想应该存在一些更标准的模式。

有 https://redux.js.org/api/store#subscribelistener 方法，但它没有参数，它可用于检测状态的变化，但我看不出如何看到哪个动作已经执行。

Answer 1

你不能使用 redux-connect ？

Answer 2

我只是在每个操作中添加了completionTime: new Date()，然后组件的componentDidUpdate完成了所有工作：

componentDidUpdate(prevProps, prevState) {
if (prevProps.completionTime!=this.props.completionTime) {
//do whatever needs to be done  
}
}

就这么简单，没有特别的观察者。当然，人们总是可以在存储中引入侦听器数组，然后在此数组中注册侦听器并构建所有这些基础结构，但我想，componentDidUpdate是正确的工具。