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

IT技术 javascript reactjs redux
2021-05-19 05:08:54

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

基本上我有一个用户列表,我想删除一个。然后将其与 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)
    }
}
1个回答

我还认为确认操作应该 [only] UI 的作用。

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

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

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

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

IDEA:在需要确认时分派的动作保存在缓冲区中。然后您可以将动作类型更改为CONFIRM_SHOW- 状态将被更改,props传递,可以显示模态对话框。

CONFIRM_OK运行缓冲操作时,接下来的步骤将与CONFIRM_CANCEL:清除缓冲区和隐藏模式相同。它甚至可以是一个值 - 缓冲区可以是在mapStateToProps.

为了完全可用,应该有一个选项可以将自定义确认消息与reqConfirm.