React、Redux、Thunk

Question

我现在已经为这段代码苦苦挣扎了一段时间，通过 Whosebug 和文档在线搜索，有些东西我只是没有得到...

我基本上是在使用带有 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）错误：动作必须是普通对象。使用自定义中间件进行异步操作。

我认为这里有一些基本的东西我没有掌握。

感谢任何帮助。

Ml，文森特

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

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

Answer 1

与其尝试分派一系列操作，我建议您直接执行您需要的任何异步操作。例如：

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

React、Redux、Thunk

React, Redux, Thunk

javascript

reactjs

redux

redux-thunk