Reduxストア内のアイテムの個別非同期呼び出しの処理

Question

私はレースミツバチをいくつか持っています。私のreduxストアでは、名前プロパティと尤度プロパティを持つ配列のオブジェクトです。それぞれの蜂について、私はその勝利の可能性を計算したいと思います。計算アルゴリズムは非同期です。すべてのミツバチの計算を開始すると、ミツバチの尤度特性は '計算'の値を持つべきであり、ミツバの計算が完了すると、尤度特性は数値を示すべきである。

私には修正できない機能generateBeeWinLikelihoodCalculatorがあります。

現在のところ、私のコードでは、ミツバチを別々に獲得する可能性は計算されていません。これを達成するための最良の方法については迷っています。私は、各蜂インスタンスにcalcultingLikelihood関数を送り込み、それを減速機で呼び出すことを考えましたが、まず「計算...」を返すようにしてから、setTimeoutが実行されたときに値を返します。

let state = {bees:[{name: 'marie'},{name: 'john'}]} 
 

 
const reducer = (state, action) => { 
 
\t switch (action.type) { 
 
    \t case 'FETCH_BEES': 
 
    \t return { 
 
     \t ...state, 
 
     bees: action.bees, 
 
     } 
 
    case 'RUN_CALCULATIONS': 
 
    \t return { 
 
     \t ...state, 
 
     bees: state.bees.map(bee => { 
 
     \t bee.likelihood = action.likelihood 
 
      return bee 
 
     }) 
 
     } 
 
    case 'DISPLAY_CALCULATIONS': 
 
     \t return { 
 
     \t ...state, 
 
     bees: state.bees.map(bee => { 
 
     \t bee.likelihood = action.likelihood 
 
      return bee 
 
     }) 
 
     } 
 
    default: return state 
 
    } 
 
} 
 

 
const runCalculations = (likelihood) => ({ 
 
\t type: 'RUN_CALCULATIONS', 
 
    likelihood, 
 
}) 
 

 
const displayCalculations = (likelihood) => ({ 
 
\t type: 'DISPLAY_CALCULATIONS', 
 
    likelihood, 
 
}) 
 

 
const store = { 
 
\t dispatch: (action) => { 
 
    \t state = reducer(state,action) 
 
    \t return state 
 
    }, 
 
    getState:() => { 
 
    \t return state 
 
    } 
 
} 
 

 
//this calculator cannot be modified 
 
const generateBeeWinLikelihoodCalculator =() => { 
 
    var delay = 1000 + Math.random() * 1000; 
 
    var likelihoodOfAntWinning = Math.random(); 
 

 
    return function(callback) { 
 
    setTimeout(function() { 
 
     callback(likelihoodOfAntWinning) 
 
    }, delay); 
 
    }; 
 
} 
 

 
const calculatingLikelihood =() => { 
 
    store.dispatch(runCalculations('calculating...')) 
 
    console.log(JSON.stringify(store.getState())) 
 
\t const callback = (likelihoodOfBeeWinning) => { 
 
    \t store.dispatch(displayCalculations(likelihoodOfBeeWinning)) 
 
    \t console.log(JSON.stringify(store.getState())) 
 
    } 
 
    return generateBeeWinLikelihoodCalculator()(callback) 
 
} 
 

 
calculatingLikelihood()

Answer 1

私もハチにidプロパティを与え、ミツバチの配列対IDによってハチのマップとして保存であろう。これにより、状態の個々のミツバチの更新が容易になります。

約束やasync/awaitも利用できます。

だから状態になる：{1：{ID：1、名称： 'マリー'}、2：{ID：2名： 'ジョン'}}

// Grab the list of Bees 
const bees = store.getState().bees 

// Work on each bee and update it individually 
Object.values(bees).forEach(async bee => { 
    const likelihood = await calculate(bee) 
    store.dispatch({ type: 'UPDATE_BEE', payload: { ...bee, likelihood } }) 
}) 

// Or you could wait for all calculations to resolve before updating state 
const promises = Object.values(bees).map(async bee => { 
    const likelihood = await calculate(bee) 
    return { ...bee, likelihood } 
}) 

Promise.all(promises).then(bees => { 
    store.dispatch({ type: 'UPDATE_BEES', payload: _.keyBy(bees, 'id') }) 
}) 

状態= {ハチを聞かせ