web-dev-qa-db-ja.com

ReduxPromiseではなくReduxPromiseミドルウェアを使用するのはなぜですか？

Redux Promise を使用しましたが、 Redux Promise Middleware には、「PENDING」または「FULFILLED」が追加された複数のアクションをディスパッチするなどの機能があります。

なぜ私は一方を他方の上に使用するのですか？

javascriptreduxredux-promiseredux-promise-middleware
7
user4703365

私は個人的に、楽観的な更新を可能にするミドルウェアとしてRedux PromiseMiddlewareを好みます。保留中、実行済み、および拒否されたアクションをディスパッチします。 Redux Thunk と連携して、非同期アクションを連鎖させます。

たとえば、レデューサーで_PENDINGおよび_FULFILLEDを使用してアクションを使用し、プログレスバーなどでUIを更新できます。

6
GibboK

ReduxPomiseミドルウェアに代わるものがあります。 Redux Auto はredux-promise-middlewareと同じAPIを備えており、作成する必要のある定型文を減らすために、内部に多数のユーティリティパターンが付属しています。

アイデアは、それぞれ 特定のファイル内のアクション を持つことです。 「保留中」、「実行済み」、「拒否済み」のレデューサー関数を使用して、ファイル内のサーバー呼び出しを同じ場所に配置します。これにより、promiseの処理が非常に簡単になります。

また、 ヘルパーオブジェクト（「async」と呼ばれる） を状態のプロトタイプに自動的にアタッチし、UIで追跡し、遷移を要求できるようにします。

例：

data/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

1
codemeasandwich