店舗の一部は他の部分に頼っている

Question

ユーザーは、ボタンをクリックして、クリックが行われたときの対応する時刻を示すタイムスタンプのリストを作成できます。ユーザーは、リスト上の項目をクリックして項目を削除することもできます。

店舗では、ボタンがクリックされた回数を記録したカウンタ状態があります。次に、タイムスタンプのリストを追跡する別の状態があります。リスト状態の各項目は、カウンタ状態から派生したidフィールドを持っています。したがって、ストアの一部は別の部分に依存します。

試みとして、私は1つのアクションをディスパッチし、両方のレデューサーは同じアクションを処理し、うまく動作しますが、それはDRYではないということだけです。ディスパッチする前に、アクションペイロードとして使用する新しいIDを取得するためにカウンタ状態に1を加えなければなりません。ディスパッチ後にカウンタ状態に1を加えて新しいカウンタ状態に戻します。それは自分自身を繰り返す。

このような問題を処理する一般的な標準方法は何ですか？

Answer 1

一般的な簡単な方法は、サンクを使用することです。 https://github.com/gaearon/redux-thunk

これにより、単純なアクションの代わりに関数をディスパッチすることができます。その機能の中で、状態にアクセスして、何度でも何度もディスパッチすることができます。

シナリオでは、まずカウンタを増分してから新しいIDを取得するために長さを取得し、別のアクションをディスパッチしてタイムスタンプを作成します。

あなたの行動のクリエイターのためのいくつかの仮想コード：

// basic action creators to be handled in your reducers 
function incrementCounter(){ 
    return { type: 'INCREMENT'} 
} 
function createTimestamp(id){ 
    return { type: 'CREATE_TS', id } 
} 
// this is the thunk 
function incrementAndTimestamp(){ 
    return (dispatch, getState) => { 
    // increment the counter 
    dispatch(incrementCounter()) 
    // generate an "id" from the resulting state 
    const newId = getState().counter.length 
    // and use that id to further update your state 
    dispatch(createTimestamp(newId)) 
    } 
} 

あなたの減速で、それらの2つの異なるアクションを処理する必要があります、あなたは今、2つのコードの別々の部分を持っています。サンクはディスパッチして1つの部分からデータを取得し、それを使って他の部分に影響を与える接着剤です。