2017-06-02 7 views
2

アクションに渡されたaction.dataへのコールバックが追加されました。何か間違った/アンチパターンのアイザ(「の思考中反応/還元」)がありますか?コールバックをReduxリデューサに追加

アクションが(おそらく容器内)が呼び出されたときにその後Appでそのデータにアクセス
// reducer 
ACTION_FOR_REDUCER() { 
    var x = 123 
    if (action.data.callback) action.data.callback(x) 
    return { 
    something: action.data.somedata 
    } 
}, 

// later in the app 
this.props.dispatch(changeSomething({ 
    somedata: somedata, 
    callback: (x) => { console.log(x) } 
}))  

答えて

3

アイデアは、実装があり、間違っていないです。

の代わりにコールバックを追加し、(あなたがredux-thunkミドルウェアやいくつかの類似の代替が必要になります)アクションから約束を返します。

は、その後、あなたは簡単に行うことができます。もちろん

dispatch(myAction).then(callback); 

は、あなたはまた、単に通常、一つの化合物のアクションになってしまうあなたのコールバックで別のアクションを、派遣することができます。

const myAction = ... 
const callbackAction = ... 

const compoundAction =() => dispatch => { 
    dispatch(myAction()) 
     .then(() => dispatch(callbackAction())); 
}; 
5

introduction section of the docsに記載されている)のReduxの第3の原理は、「変化があるということです純関数 'で作られています。

純粋な関数は、同じ入力に対して常に同じ結果を返し、副作用を起こさない関数です。コールバックログを持つことは、間違いなく副作用になります!

The docs go on to say:

それは減速が純粋なままということが非常に重要です。減速機の内部で決して行うべきでないこと:

  • 引数を変更します。
  • APIコールやルーティング移行などの副作用を実行します。
  • 非純粋な関数を呼び出します。 Date.now()またはMath.random()。

この背後にある理由は、それはあなたの減速が予測可能である - あなたは、特定のペイロードを持つアクションを考えると、あなたはは、同じ出力を持つようにを保証している、ということを知っています。これにより、開発者としてのアプリの理解が容易になり、単体テストが容易になります。

あなたは、アクションが行われるときの副作用を実行したい場合は、あなたがそうすることを可能にするミドルウェアをインストールする必要があります - これらのいくつかの一般的な例は以下のとおりです。

  • redux-thunk、あなたが機能を派遣することを可能にします(API呼び出しを行うためによく使用される)アクションをディスパッチすることができます。
  • redux-loggerこれは、ディスパッチされたアクションをログアウトすることを可能にします。
  • redux-devtools-extensionこれは、Chromeのdevtools拡張機能で状態と操作を表示できるようにします。

あなたは(正直に言うと、まれ! - そこに多くはすでにあります)何が必要ありませんミドルウェアパッケージを見つけることができない場合は、write your own非常に簡単にすることができます。

+0

あなたには、いくつかの外部APIを呼び出す場合、私はあなた自身の 'middleware' – Ematipico

+0

@Ematipicoを作成することをお勧め:答えにミドルウェア上のいくつかの詳細を追加します:) –

+0

おかげで、私はReduxの-サンクは何だと思います探しています。しかし、突然変異の主題に関しては、後に起こる突然変異ではなく、「ディスパッチ」の一部であり、減速機自体ではない。 –

0

コールバックは副作用をもたらします。したがって、Reduxを使用する場合は、例えばdone: trueフラグを使用して新しい状態を返すことを検討し、componentDidUpdateに反応してください。

非同期とエフェクトを管理する場合は、redux-sagaredux-thunkRxJsまたは別のライブラリを使用できます。 コールバックをスティックしたい場合は、なぜReduxを気にするのですか?

関連する問題