Redux中间件只有一半工作但没有完全取消操作

Question

我有一些简单的中间件，有点工作，但也没有工作

基本上我有一个用户列表，我试图删除一个。然后与firebase同步。一切都很好。

我正在添加一些中间件，以便当用户删除一个时，它询问您是否确定？ （现在只使用一个简单的alert）。如果单击取消，则不会删除。如果你单击确定它确实

到目前为止，这是有效的，但由于我的动作创建者，它仍然继续并删除用户。这是一些代码：

//单击以删除用户

  <button
    onClick={() =>
      this.props.deleteUserFromStoreThenUpdateFirebase(user)
    }
 >

调用这个方法我认为这里有一些时髦的东西，基本上如果我点击取消它不应该调用deletedUserFromFirebase方法

export const deleteUserFromStoreThenUpdateFirebase = user => {
  return (dispatch, getState) => {
    return dispatch(deleteUser(user)).then(() => {
      return deleteUserFromFirebase(user);
    })
  };
};


export const deleteUser = user => {
  return async dispatch => {
    dispatch({ type: DELETE_USER, user: user, reqConfirm: true });
  };
};

中间件：

const confirmMiddleware = store => next => action => {
    if(action.reqConfirm){
      if(confirm('are you sure?')){
        next(action)
      }
    }
    else {
      next(action)
    }
}

Answer 1

我还认为确认操作应该是[仅] UI的角色。

Redux商店可以（应该？）被视为API - 请求（操作）>响应（更改状态）。您是否向API发送请求并等待确认消息？这至少是奇怪的。

但我认为这个想法更有意义。集中确认元素可以对toast / snackbar消息具有类似的作用。

问题1：UI和存储逻辑之间存在严格的分离 - 您无法使用中间件来显示对话框。但您可以更改UI中可用于显示确认对话框的状态。

问题2：没有简单的if/then/return操作链，你必须缓冲一个动作并在确认后运行它（接收'确认'动作）或在取消时放弃它。是的，它可以作为中间件来完成。

IDEA：调度为需要确认的操作保存在缓冲区中。然后你可以将动作类型更改为CONFIRM_SHOW - 状态将被更改，道具通过，模态对话框可以显示。

在CONFIRM_OK上运行缓冲动作，接下来的步骤将与CONFIRM_CANCEL相同：清除缓冲区和隐藏模态。它甚至可以是一个值 - 缓冲区可以是mapStateToProps中的模态标志（空 - 隐藏，定义 - 显示）。

要完全可用，应该有一个选项来传递自定义确认消息和reqConfirm。