时间戳

首页 > 解决方案 > React、Redux、Thunk

javascript - React、Redux、Thunk

问题描述

我现在一直在为这段代码苦苦挣扎，通过stackoverflow和文档在线搜索，有些东西我只是没有得到......

我基本上是在使用带有 thunk 的 react redux。这是代码：

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()))

    }
}

我正在尝试创建一系列需要同时执行的操作。我用 redux thunk 阅读，你可以使用 Promise.all。我正在创建一个调度函数数组，它运行 getChart，它基本上是一个提取图表的数据点并将其放入存储的操作。要执行的函数数量基于 stateConfig.charts，它是一个数组，其中包含拉动图表所需的所有数据以及每个单独图表的选项。

当我这样做时，它以某种方式永远不会调度函数，我不知道为什么。如果我以任何方式更改代码，我会得到：1) dispatch(...).then 不是函数 2) 错误：操作必须是普通对象。使用自定义中间件进行异步操作。

我认为这里有一些基本的东西我没有抓住。

任何帮助表示赞赏。

毫升，文森特

编辑：在我得到帮助之后，我得到了这个：

    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)}
                )
        }
    }

标签： javascriptreactjsreduxredux-thunk

解决方案

我建议您直接执行所需的任何异步操作，而不是尝试调度一系列操作。例如：

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);
}

推荐阅读