反応し、サンク

簡単な紹介

すべての操作は、レデューサーを同期して純粋である、すなわち、減速が純粋な関数ですが、結果の手段純粋な関数が返す関数は、唯一の引数に依存し、実行時に外部の副作用発生しませんそれはそれは吐き出すものを、それのために渡されたものです。しかし、実際のアプリケーション開発では、あなたは、いくつかの非同期を行うことをお勧めしますと関数型プログラミングのパラダイムで呼ばれ、（そのような外部の状態を変更するなど）純粋でないOS（例えばAjaxリクエスト、データへの非同期アクセス、アクセスブラウザのキャッシュなど）「副作用。」など

ミドルウェアを提供することによって、これらの副作用に対処しますReduxの著者は、開発者は、実装のための方法を選択することができます。

Reduxの-サンクとReduxのReduxの-サガは2つの非同期ストリーム処理の最も一般的なアプリケーションです。

Reduxの-サンクは、アクションがオブジェクトにアクションを返さないミドルウェア機能を作成することができ、しかし返す関数は、関数は、2つのパラメータ（ディスパッチ、getStateを）、関数本体内にカプセル化されたビジネス・ロジックのための負の効果を有するが渡さ、所望の処理さ非同期操作の後に、その後、他のアクションは、送信状態を変更します。

使用

安装：NPMはReduxの-サンク-save-devのインストール
导入サンク：「Reduxの-サンク」からインポートサンク
インポートミドルウェア： 'Reduxの' からインポート{CREATESTORE、applyMiddleware}
ストアの作成：聞かせて店= CREATESTORE（減速機能、applyMiddleware（サンク））
CREATESTORE applyMiddleware（サンク）の添加のみを必要とする活性化Reduxの-サンクミドルウェア缶

コード

カウンターで例えば

あなたは、2秒の増分ボタンをクリックして、自己の成長の値を格納する場合。

アクション

src/container/action.js


エクスポート 機能（NUM） { 戻り {     タイプ："増加"、    NUM：NUM   }。}
  





//デクリメント要求
エクスポート 関数 handleInReduceAction（NUM） { 戻り {     タイプ："inReduce" 、    NUM：NUM   }; }
  





//インクリメント非同期要求の
エクスポート 関数 handleIncreaseActionAsync（NUM） { // getStateを（）店の現在の値を取得する戻り非同期（ディスパッチ、getStateをを）=> { コンソールの.log（'getStateを'、getStateを（））; のawait asyncFn（ ）; //タスク配布     ディスパッチ（handleInReduceAction（））;   }; }
  
   
    
    
    




非同期 機能 asyncFn（） { 戻り、新たな約束（決意 => {     たsetTimeout（ （） => { コンソールの.log（"2S端"）;       解決（）;     }、2000）;   }）; } <大专栏反応-サンク / PRE>

アクティブReduxの-サンクミドルウェア

src/configureStore.js

インポートは、「反応」からリアクト。
「反応する-DOM」からインポートReactDOM。
輸入「./style/index.scss」。
「./registerServiceWorker」からインポートregisterServiceWorker。
「./router」からインポートCRouter。
'Reduxの-サンク'からインポートサンク
インポート{ 
  CREATESTORE、
  applyMiddleware、
"Reduxの"から}。
「./reducers'からインポートcreateReducer。

// Reduxの
"反応-Reduxのを"からインポート{プロバイダ}。

CONST店舗= CREATESTORE（createReducer（）、applyMiddleware（サンク））。

ReactDOM.render（
  <プロバイダストア= {店}> 
    <CRouter /> 
  </プロバイダ>、
  のdocument.getElementById（ "ルート"）
）; 
registerServiceWorker（）;

パッケージ

Counter.js

import React, { Component } from "react";
import { connect } from "react-redux";
import { handleInReduceAction, handleIncreaseActionAsync } from './actions'
class Counter extends Component {
  render() {
    const { value, onIncreaseClick, onReduceClick } = this.props;
    return (
      <div>
        <span>{value}</span>
        <button onClick={onIncreaseClick}>增加</button>
        <button onClick={onReduceClick}>减少</button>
      </div>
    );
  }
}

function mapStateToProps(state) {
  return {
    value: state.counterReducer.count
  };
}

function mapDispatchToProps(dispatch) {
  return {
    onIncreaseClick: () => {
      dispatch(handleIncreaseActionAsync());
    },
    onReduceClick: () => {
      dispatch(handleInReduceAction());
    }
  };
}

export default connect(
  mapStateToProps,
  mapDispatchToProps
)(Counter);

おすすめ