Реагировать, Redux, Thunk - PullRequest
Новая
       12

Реагировать, Redux, Thunk

0 голосов
/ 27 августа 2018

Я уже давно борюсь с этим фрагментом кода, ищу онлайн через stackoverflow и документы, и есть кое-что, чего я просто не получаю ...

Я в основном использую реагирующий редук с тханком. Это код: 

export function initializeApp(){

    return function (dispatch, getState){

        console.log(getState().weekending.weekending);
        const promisesArray = stateConfig.charts.map(option=>{
            return ()=> new Promise(resolve=>{
                ()=>dispatch(getChart(option,getState().weekending.weekending))
                resolve()}
            )
        });

        const delay = (ms) => new Promise(resolve =>
            setTimeout(resolve, ms)
        );

        console.log(promisesArray);
        return Promise.all(
            promisesArray
            ).then(delay(10000)
            ).then(()=>{console.log(getState().charts)}
            )
        // .then(()=>dispatch(appLoaded()))

    }
}

Я пытаюсь создать массив действий, которые должны выполняться одновременно. Я читал с избыточным Thunk, вы можете использовать Promise.all. Я создаю массив функций диспетчеризации, который запускает getChart, который в основном представляет собой действие, которое извлекает dataPoints диаграммы и помещает ее в хранилище. Количество выполняемых функций основано на stateConfig.charts, который является массивом, который содержит все данные, необходимые для извлечения диаграмм, а также параметры каждой отдельной диаграммы.

Когда я делаю это, он как-то никогда не отправляет функции, я не уверен почему. Если я изменю код каким-либо образом, я получу: 1) диспетчеризация (...). Тогда не является функцией 2) Ошибка: действия должны быть простыми объектами. Используйте пользовательское промежуточное ПО для асинхронных действий.

Я думаю, что здесь есть нечто фундаментальное, чего я не понимаю.

Любая помощь приветствуется.

мл, Винсент

EDIT: После помощи, которую я получил, я закончил с этим: 

    function appLoaded(dispatch){
        return new Promise(resolve=>{
            dispatch({type: ActionTypes.APP_LOADED});
            resolve();
        })
    }

    function getChart(options,weekending,dispatch){
        return new Promise((resolve,reject)=>{
            const {controller, action, payload } = options;
            payload.weekending = weekending;
            const SocketConnection = {controller,action,payload};
            console.log(SocketConnection)
            socket.emit(SocketRequest, SocketConnection, (data) => {
                const dataPoints = data.map((row,index)=>{return{x:index, label:row.name, y:timeToDecimal(row.value), labelValue: row.value, id:row.id }})
                    const payload = {
                        ...options, data: {...options.data.primary, dataPoints,}
                    }
                dispatch({type: ActionTypes.ADD_CHART, payload});
                resolve();
            })
        })
    }

    export function initializeApp(){
        return function (dispatch, getState){
            const promisesArray = stateConfig.charts.map(option=>getChart(option,getState().app.weekending,dispatch))
            const delay = (ms) => new Promise(resolve => setTimeout(resolve, ms));
            return Promise.all(
                promisesArray
                ).then(appLoaded(dispatch)
                ).then(()=>delay(3000)
                ).then(()=>{console.log(getState().charts)}
                ).then(()=>{console.log(getState().app)}
                )
        }
    }

1 Ответ

0 голосов
/ 27 августа 2018

Вместо того, чтобы пытаться отправлять массив действий, я бы порекомендовал вам просто напрямую выполнять любые асинхронные операции, которые вам нужны. Например: 

function initializeApp(){
  return function (dispatch, getState) {
    const weekending = getState().weekending.weekending;
    const promisesArray = stateConfig.charts.map(option => {
      return doWork(option, weekending);
    })

    Promise.all(promisesArray)
      .then(charts => {
        dispatch(appLoaded(charts))
      })
  }
}


function doWork(option, weekending) {
  // maybe it looks something like this? Substitute with whatever you need to do, 
  //   and make sure to return a promise
  return http.get('someUrlBasedOnOptionAndWeekending')
    .then(response => response.data);
}
...