为什么我会使用Redux Promise Middleware而不是Redux Promise？

Question

我已经使用了Redux Promise，但似乎Redux Promise Middleware具有更多功能，例如使用＆＃34; PENDING＆＃34;调度多个操作或＆＃34; FULFILLED＆＃34;追加。

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

Answer 1

我个人更喜欢Redux Promise Middleware作为中间件，因为它可以实现乐观的更新;发送未决，已履行和被拒绝的行动;并与Redux Thunk配合使用以链接异步操作。

例如，您可以在reducer中使用_PENDING和_FULFILLED的操作，并使用进度条和类似内容更新UI。

Answer 2

还有Redux Pomise中间件的替代品。 Redux Auto与redux-promise-middleware具有相同的API，并附带了一堆实用程序模式，以减少您需要编写的样板。

这个想法是让每个action in a specific file。将文件中的服务器调用与“pending”，“fulfilled”和“rejected”的reducer函数共同定位。这使得处理承诺非常容易。

它还会自动将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]})
}

UI

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会根据文件结构自动创建操作并将它们连接起来。文件夹名称成为状态属性的名称。文件夹中的文件是要在该州的该部分执行的操作。

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