Redux 저장소의 항목에 대해 별도의 비동기 호출 처리

Question

일부 경주 용 꿀벌이 있습니다. 내 redux 저장소에서는 name 속성과 likelihood 속성이있는 배열의 개체입니다. 각 벌에 대해서, 나는 그 우승 확률을 계산하고 싶습니다. 계산 알고리즘은 비동기입니다. 모든 꿀벌의 계산을 시작할 때 꿀벌의 우도 속성은 '계산'값을 가져야하며, 꿀벌 계산이 완료되면 우도 속성은 숫자를 표시해야합니다.

수정 할 수없는 기능이 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로 꿀벌의지도로 저장할 것입니다. 이렇게하면 상태에있는 개별 꿀벌을 쉽게 업데이트 할 수 있습니다.

약속이나 비동기/대기를 사용할 수도 있습니다.

그래서 상태가된다 :

하는 상태 = {꿀벌을 보자 : {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') }) 
})