為什么我會使用Redux Promise Middleware而不是Redux Promise？

Question

我使用過Redux Promise ，但似乎Redux Promise Middleware具有更多功能，例如通過附加“PENDING”或“FULFILLED”來調度多個動作。

為什么我會使用一個而不是另一個？

Answer 1

我個人更喜歡Redux Promise Middleware作為中間件，因為它可以實現樂觀的更新; 發送未決，已履行和被拒絕的行動; 並與Redux Thunk配合使用以鏈接異步操作。

例如，您可以在reducers中使用帶有_PENDING和_FULFILLED操作，並使用進度條和類似更新UI。

Answer 2

還有Redux Pomise中間件的替代品。 Redux Auto與redux-promise-middleware具有相同的API，並帶有一堆實用程序模式，以減少您需要編寫的樣板。

我們的想法是將每個操作都放在特定的文件中 。 將文件中的服務器調用與“pending”，“fulfilled”和“rejected”的reducer函數共同定位。 這使得處理承諾變得非常容易。

它還會自動將輔助對象（稱為“異步”）附加到您的狀態原型，允許您在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項目