redux-thunkとcalling dispatch（）を直接使用することの違いは何ですか

Question

私はredux状態管理を理解していて、ボイラープレートコードとミドルウェアの混乱しているジャングルを交渉しようとしています。信仰を「良い薬」とする。だから私はあなたにこの恐らく初歩的な質問に耐えられることを願っています。

私は、redux-thunkが、アクションクリエイターが非同期に進み、その後の通常のアクションをディスパッチできることを知っています。例えば、私は私のactions.jsにサンクアクションの作成者を定義することができます。

export function startTracking() { 
    return (dispatch => { 
    someAsyncFunction().then(result => dispatch({ 
     type: types.SET_TRACKING, 
     location: result 
    })) 
    }) 
} 

そしてそうのように反応させ、コンポーネント内から呼び出す：

は

onPress={() => this.props.dispatch(actions.startTracking())} 

私の質問はで、どのような利点が上記を行いますコードは、単に非同期コールバックの内部からアクションをディスパッチすることに与えますか？私は私のコンポーネント

onPress={() => actions.startTracking()} 

あるいは

onPress={actions.startTracking} 

の内側に呼び出します

import { store } from '../setupRedux' 
... 

export function startTracking() { 
someAsyncFunction().then(result => { 
    store.dispatch({ 
    type: types.SET_TRACKING, 
    location: result 
    }) 
}) 
} 

私は第二の例でやっているようインポートを経由して直接storeにアクセスすると、問題は何があります？

Answer 1

何も問題ありません。 redux-thunk pageから：

あなたはあなたがそれを必要とするかどうかわからない場合、あなたはおそらくありません。

Reduxのの生みの親、それをhereを使用する利点を説明します。

これは単純に見えますが、我々はこの方法をお勧めしません。私たちがそれを嫌う主な理由は、ストアをシングルトンにするためです。これにより、サーバーレンダリングの実装が非常に難しくなります。サーバー上では、各ユーザーに異なるプリロードされたデータが得られるように、各要求に独自のストアが必要です。

基本的には、redux-thunkを使用すると、各アクションクリエータファイルにストアインポートが保存され、複数のストアを持つことができます。この方法では、少し少ないコードを書いてスパゲッティコードを避けることもできます。多くのredux開発者は、ストアをインポートして手動でディスパッチするのは好きではありません。なぜなら、コードがひどく分離されていると循環依存を作成できるからです（リデューサーファイルのアクションクリエータファイルからアクション名をインポートし、アクション作成者ファイル）。また、そのようなアクションを直接ディスパッチすると、ミドルウェアのワークフローが壊れる可能性があります。つまり、アクションはミドルウェアによって処理されない可能性があります。

しかし、正直なところ、まだ利点がない場合は、使用しないでください。ある日、非同期アクションに問題がある場合、redux-thunkが答えになるかもしれません。