如何观察 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 操作的完成。

我的意图是否有意义，这种 event/listener/observer 模型是否有 React 模式？

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

我知道 Emitting events from Redux reducers（不幸的是，这个很好的问题很少受到关注）关于自定义事件数组的想法，但我想应该存在一些更标准的模式。

有https://redux.js.org/api/store#subscribelistener方法，但是没有参数，可以用来检测状态的变化，但是我看不出怎么看是哪个action被执行了

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 是正确的工具。

如何观察 Redux 动作？

How can the Redux action be observed?

reactjs

events

redux

react-redux

observer-pattern