javascript - 为什么我要使用 Redux Promise Middleware 而不是 Redux Promise？

Question

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

为什么我要使用其中一个？

Answer 1

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

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

Answer 2

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

这个想法是将每个动作都放在一个特定的文件中。将文件中的服务器调用与“待处理”、“已完成”和“已拒绝”的减速器功能放在一起。这使得处理 Promise 变得非常容易。

它还自动将一个辅助对象（称为“异步”）附加到您的状态原型，允许您在 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 项目