使用自定义中间件进行异步操作-在编写重击操作时

时间:2018-11-24 14:41:04

标签: reactjs redux react-redux redux-thunk

我不知道为什么这会给我带来麻烦。我已经派出了很多暴徒,这应该是一个简单的暴徒。

这是我的商店:

import { createStore, applyMiddleware } from 'redux';
import thunk from 'redux-thunk';
import rootReducer from './reducers';
import logger from 'redux-logger';
import CircularJSON from 'circular-json';

let store;

const persistedState = localStorage.getItem('storeState') ?
                      JSON.parse(localStorage.getItem('storeState')):
                      {}

store = 
createStore(rootReducer,persistedState,applyMiddleware(thunk,logger));

这是动作创建者:

export async function fetchSrcContorlTrendChartData(){ 
 return async (dispatch)=>{
   let data = await getChartsData();
   dispatch({type:C.FETCH_SRC_CONTROL_TREND_CHART_DATA,payload:data})
  }
}//fetchS

这是grtChartsData函数:

export function getChartsData(){
  return {
    "labels": 
  ['Jan','Feb','Mar','Apr','May','Jun','Jul','Aug','Sep','Oct','Nov','Dec'],
  "gitActiveReposByMonth":[1,4,6,7,7,7,9,10,24,56,45,23],
  "TFVCActiveReposByMonth":[23,18,15,15,15,6,17,12,23,12,8,3],
  }; 
 }//getChartsData

任何帮助都是伟大的

1 个答案:

答案 0 :(得分:0)

我阅读了您的代码,但是我无法弄清楚您到底要面对什么问题,或者您显示的代码与自定义中间件有什么关系?

我看到的唯一问题是,您正在使用await调用非异步函数“ getChartsData()”,而您不需要

您可以将其更改为

export function fetchSrcContorlTrendChartData() {
    return (dispatch)=>{
        let data = getChartsData();
        dispatch({type:C.FETCH_SRC_CONTROL_TREND_CHART_DATA,
           payload:data
        })
    }
}//fetchS

但更好的是,您实际上根本不需要thunk

export function fetchSrcContorlTrendChartData() {
    return {
        type: C.FETCH_SRC_CONTROL_TREND_CHART_DATA,
        payload: getChartsData();
    }
}