Redux 中间件工作了一半但没有完全取消操作 [英] Redux middleware is half working but not fully cancelling action

问题描述

我有一些简单的中间件，可以工作但也不能工作

I have some simple middleware that is kind of working but also not working

基本上我有一个用户列表，我正在尝试删除一个.然后将其与 firebase 同步.一切都很好.

basically I have a list of users and I am trying to delete one. and then sync it up with firebase. all is well.

我正在添加一些中间件，以便当用户删除一个中间件时，它会询问您是否确定?(现在只使用一个简单的alert).如果您单击取消，它不会删除.如果你点击确定它会

I'm adding some middleware so that when a user deletes one it asks if you are sure? (just using a simple alert for now). if you click cancel, it doesn't delete. if you click ok it does

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

so far, that is working but because of my action creators it still carrying on and deleting the user. here is some code:

//点击删除用户

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

调用这个方法我认为这里发生了一些奇怪的事情，基本上它不应该调用 deletedUserFromFirebase 方法，如果我点击取消

calls this method I think something funky is going on here, basically it shouldn't call the deletedUserFromFirebase method if I hit cancel

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)
    }
}

推荐答案

我也认为确认操作应该 [only] UI 的作用.

Redux 存储可以(应该?)被视为 API - 请求(操作)> 响应(更改状态).您是否正在向 API 发送请求并等待确认消息?至少会很奇怪.

Redux store can (should?) be treated like API - request (action) > response (changed state). Are you sending request to an API and waiting to confirmation message? It would be at least strange.

但我在这个想法中看到的不仅仅是某种意义.集中确认元素可以起到类似于 toasts/snackbar 消息的作用.

But I see even more than some sense in this idea. Centralised confirmation element can have a similiar role to toasts/snackbar messages.

问题 #1:UI 和存储逻辑之间存在严格分离 - 您不能使用中间件来显示对话框.但是您可以更改可在 UI 中使用的状态以显示确认对话框.

Problem #1: There is a strict separation between UI and store logic - you can't use middleware to show dialog. But you can change state which can used in UI to show confirmation dialog.

问题#2:没有简单的if/then/return动作链，你必须缓冲一个动作并运行它确认后(接收确认"操作)或取消时将其删除.是的，它可以作为中间件来完成.

Problem #2: There is no simple if/then/return chain of actions, you have to buffer an action and run it after confirmation (receiving 'confirm' action) or drop it on cancel. Yes, it can be done as middleware.

想法:当需要确认时分派的动作保存在缓冲区中.然后，您可以将操作类型更改为 CONFIRM_SHOW - 状态将更改，道具传递，可以显示模态对话框.

IDEA: Action dispatched as requiring confirmation is saved in buffer. You can then change action type to CONFIRM_SHOW - state will be changed, props passed, modal dialog can be shown.

在CONFIRM_OK 上运行缓冲动作，接下来的步骤将与CONFIRM_CANCEL 相同:清除缓冲区并隐藏模态.它甚至可以是一个值 - 缓冲区可以是 mapStateToProps 中派生的模式标志(空 - 隐藏，已定义 - 显示).

On CONFIRM_OK run buffered action, next steps will be common with CONFIRM_CANCEL: clear buffer and hide modal. It could be even one value - buffer can be a modal flag (empty - hide, defined - show) dervied in mapStateToProps.

要完全可用，应该有一个选项可以将自定义确认消息与 reqConfirm 一起传递.

To be fully usable there should be an option to pass custom confirmation message along with reqConfirm.

这篇关于Redux 中间件工作了一半但没有完全取消操作的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！