如何观察 Redux 操作？答案

【问题标题】：How can the Redux action be observed?如何观察 Redux 操作？
【发布时间】：2020-01-19 10:21:29
【问题描述】：

我有带有操作的 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，但它不会领先很远，因为应该通过将它们与以前的值进行比较来跟踪这些值（这可能存储在组件的本地状态中），在这种情况下，在多次错误操作成功的情况下没有工作场景。

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

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

【问题讨论】：

标签： reactjs events redux react-redux observer-pattern

【解决方案1】：

你不能使用redux-connect？

【讨论】：

【解决方案2】：

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

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

就这么简单，没有特殊的观察者。当然，总是可以在 store 中引入监听器数组，然后在这个数组中注册监听器并构建所有这些基础设施，但我想，componentDidUpdate 是正确的工具。

【讨论】：