为啥我要使用 Redux Promise Middleware 而不是 Redux Promise？

Posted 2023-02-22

【中文标题】为啥我要使用 Redux Promise Middleware 而不是 Redux Promise？

【英文标题】：Why would I use Redux Promise Middleware over Redux Promise?为什么我要使用 Redux Promise Middleware 而不是 Redux Promise？

【发布时间】：2017-10-26 08:50:47

【问题描述】：

我使用过Redux Promise，但似乎Redux Promise Middleware 具有更多功能，例如调度多个附加了“PENDING”或“FULFILLED”的操作。

为什么我要使用一个而不是另一个？

【参考方案1】：

我个人更喜欢 Redux Promise Middleware 作为中间件，因为它支持乐观更新；调度待处理、已完成和已拒绝的操作；并与 Redux Thunk 配合使用以链接异步操作。

例如，您可以在 reducer 中使用带有 _PENDING 和 _FULFILLED 的操作，并使用进度条等更新 UI。

【参考方案2】：

Redux Pomise 中间件有一个替代方案。 Redux Auto 具有与 redux-promise-middleware 相同的 API，并在底层提供了一系列实用程序模式，以减少您需要编写的样板代码。

我们的想法是让每个action in a specific file。将文件中的服务器调用与“待处理”、“已完成”和“已拒绝”的减速器功能放在一起。这使得处理 Promise 变得非常容易。

它还会自动将helper object (called "async") 附加到您的状态原型，允许您在 UI 中跟踪请求转换。

示例：

数据/serverThing.js

export function pending (posts, payload)
  return posts


export function fulfilled (posts, payload, result)
  return result.serverResponse


export function rejected (posts, payload, error)
  return posts;


export function action (payload) 
  return Promise.resolve(serverResponse: [1,2,3,4])

用户界面

import React  from "react"
import actions from 'redux-auto'
import  connect  from 'react-redux'

class Foobar extends Component 

  const currentLoadingData = this.props.data.async.serverThing;

  if(currentLoadingData instanceof Error)
    var data = currentLoadingData.message
   else if(true === currentLoadingData )
    var data = "Loading..."
   else 
    var data = this.porps.data.join();
  

  render () 
    return (
      <div>
        <button onClick=()=>actions.data.serverThing()>Do something!</button> 
         data 
      </div>
    )
  


const mapStateToProps = (  data ) => 
  return  data 
;

export default connect( mapStateToProps )(Foobar);

了解以上来源。 redux-auto 自动创建动作并根据文件结构将它们连接到 reduce。其中文件夹名称成为状态属性的名称。文件夹中的文件是要对状态的该部分执行的操作。

这是一个完整的redux-auto: helloworld project