Javascript ReactJS Redux异步操作

我已经阅读了很多关于在reactjs中使用redux的教程，但是我仍然缺少一些东西。下面是我的行动方法

export const uploadFile = (files) => async (dispatch) => {

dispatch({ 
    type: T.UPLOAD_REQUEST,
    payload:{UploadStatus:"InProcess"}
 });
axios.post(`${config.API_URL}/upload`, files)
    .then(res => {
        dispatch({ 
            type: T.UPLOAD_SUCCESS, 
            payload: { UploadResponse: res.data,UploadStatus:"Completed"} 
        });
    }).then(res=>{

        dispatch({ 
            type: T.UPLOAD_SUCCESS, 
            payload: { UploadResponse: null,UploadStatus:"Queued"} 
        });

    })
    .catch(err =>{
        console.log(err);
        dispatch({ 
            type: T.UPLOAD_FAIL, 
            payload: { UploadResponse: err,UploadStatus:"Error" } 

        });
    }
    ).then(res=>{

        dispatch({ 
            type: T.UPLOAD_FAIL, 
            payload: { UploadResponse: null,UploadStatus:"Queued"} 
        });

    })
};

此操作将文件上载到服务器上，并发送到reducer以在UI上进行更新。“UploadResponse”和“UploadStatus”是我需要在前端呈现UI的两个状态字段

当请求启动时，我将

{UploadStatus:“InProcess”}

设置为渲染微调器。请求成功或失败后，我相应地将此状态字段设置为“已完成”或“错误”。这有助于我删除微调器并呈现成功或失败消息

当请求成功且UploadStatus设置为“Completed”时，前端会弹出一条成功消息，并且在该用户进一步与组件交互以重新呈现组件后，假设我在textbox中输入一些文本，则UploadStatus仍保留值“Completed”，消息会再次弹出

为了解决这个问题，我对每个成功或失败的请求响应进行了两次调度。e、 g.您可以在上面的代码中看到，随叫随到成功我首先调度

{UploadStatus:“Completed”}

，然后

{UploadStatus:“Queued”}

重置状态。它在某种程度上帮助了我，在第一次发送时，我在屏幕上呈现成功消息，然后我重置上载状态，以便在组件上的进一步交互中不会弹出消息

但当UploadStatus设置为completed时，我必须在前端呈现一个div，即使在对组件执行进一步操作之后，这个div也必须存在。在我的第二次调度中，UploadStatus被设置为“Queued”，因此div已经消失

我将在下面进一步添加我的组件代码，以解释呈现UI的逻辑

render() {
  return (
  <div>
   <div className="upload-sect">
   {
      this.props.UploadStatus=="InProcess"?<Spin/>: <></>
      this.props.UploadStatus=="Completed"? 
      this.rendermessage("success","uploded"):<></>
      this.props.UploadStatus=="Error"?this.rendermessage("error","Upload 
      Fail"):<></>
   }
  </div>
  <div>
    {
      this.props.UploadStatus=="Completed"?
      this.renderUploadResponse(this.props.UploadResponse)
      :
      <></>
    }
</div>
</div>)}

我使用Antd消息在屏幕上弹出消息，在设置的时间间隔后自动隐藏

所以我在这里缺少的是，我无法找到一种基于状态更改在前端呈现UI的正确方法

我将简单地处理这个场景而不使用redux，就像在那里我将在我的组件中有发送请求的方法一样，在成功或失败响应中，我将直接从那里呈现消息，而不是设置状态然后根据状态呈现消息

如下

 uploadFile=(files) =>{
 this.setState({UploadResponse: null,UploadStatus:"InProcess"});
 axios.post(`${config.API_URL}/upload`, files)
 .then(res => {
    this.rendermessage("success","File uploaded successfully.");
    this.setState({UploadResponse: res.data,UploadStatus:"Completed"});

 })
 .catch(err =>{
    this.rendermessage("fail","Failed to uploaded.");
    this.setState({UploadResponse: res.data,UploadStatus:"Completed"});
 }
 )
 }; 

  render() {
  return (
  <div>
   <div className="upload-sect">
   {
      this.props.UploadStatus=="InProcess"?<Spin/>: <></>
   }
  </div>
  <div>
    {
      this.props.UploadStatus=="Completed"?
      this.renderUploadResponse(this.props.UploadResponse)
      :
      <></>
    }
</div>
</div>)}

我只是简单地处理了这个场景，因为发送请求的方法在我的组件中，我只是在单击upload按钮时调用了这个方法。这减少了我的渲染代码，如下所示

 uploadFile=(files) =>{
 this.setState({UploadResponse: null,UploadStatus:"InProcess"});
 axios.post(`${config.API_URL}/upload`, files)
 .then(res => {
    this.rendermessage("success","File uploaded successfully.");
    this.setState({UploadResponse: res.data,UploadStatus:"Completed"});

 })
 .catch(err =>{
    this.rendermessage("fail","Failed to uploaded.");
    this.setState({UploadResponse: res.data,UploadStatus:"Completed"});
 }
 )
 }; 

  render() {
  return (
  <div>
   <div className="upload-sect">
   {
      this.props.UploadStatus=="InProcess"?<Spin/>: <></>
   }
  </div>
  <div>
    {
      this.props.UploadStatus=="Completed"?
      this.renderUploadResponse(this.props.UploadResponse)
      :
      <></>
    }
</div>
</div>)}

所以没有大的变化，我只是在成功或失败调用MessageToBeDelievered设置为true后的第一次调度中保留一个额外的位“MessageToBeDelievered”，以便呈现弹出窗口，然后在下一次调度中设置为false。很简单吧。。我没有在第二次分派中更改UploadStatus，因此在成功调用后，即使在第二次分派后，其值仍然保持“已完成”。因此，我需要在成功调用时显示的div出现并停留在那里，除非UploadStatus再次变为“InProcess”

没什么大不了的。所以再次回到实际问题上来，我的问题是

（i） 使用redux和不使用redux时，我是否需要对我的UI渲染逻辑进行不同的思考。bcs我认为redux只是处理状态的另一种方式，它不应该属于我组件的渲染逻辑，但它让我认为组件渲染逻辑会发生一些变化，这是我从redux中没有想到的

（ii）除了这个弹出消息（自动隐藏），到目前为止，我找不到任何其他类似的场景，但是否还有其他类似的场景？有没有关于redux的例子

Redux将UploadStatus属性传递到组件中。在每次渲染（击键等）时，您都使用UploadStatus及其各自的ANTD渲染消息重新渲染。这会导致rendermessage运行多次，因为rendermessage使用不正确

无重复

没有传递重复渲染的道具。函数完成后，只需调用一次ANTD的rendermessage

你有多种选择来处理它

不要将ANTD的rendermessage连接到UploadStatus。只需按照您已经设置好的方式使用它，而无需重复使用

如果必须使用redux，请创建一个单独的组件来处理它，并使用React的useEffect触发rendermessage

---

特定解决方案

提到了一个可以传递给控件的

onClose

（函数）参数

当您传递的

onClose

函数在指定的持续时间后关闭时，

消息将调用该函数

您应该传递一个函数，该函数将redux状态中的
UploadStatus
属性更新为“已完成”（例如“非活动”）以外的值

总体思路

您不必对所有状态使用redux。将组件状态与redux混合使用是完全有效的。我倾向于使用组件状态来存储仅与单个组件及其子组件相关的状态和/或短期状态。我对多个组件使用的状态和/或寿命更长的状态使用redux

如果组件依赖于redux状态，则必须管理相关的redux状态，以便控制组件在后续渲染中的行为（例如，正如我上面所建议的）。正如您所注意到的，这会使某些事情比依赖于组件状态的解决方案稍微复杂一些

我不知道您的具体示例的完整上下文，但如果其他组件不需要您显示的状态，我会倾向于将其存储在组件状态中。如果其他组件需要该状态，我会将其存储在redux中，并按照我上面的建议进行管理。
如果我很好地理解您的问题，您的主要问题是，为什么即使在组件重新呈现时，仍会显示带有消息
“success”，“uploded”
的模态？带有消息I的模态