如何处理 d3.json 以在 React/redux 中获取我的 InitialState

Question

使用 React/Redux，我正在尝试使用 express 将外部数据转换为我的初始状态。我习惯使用 D3，所以我想像这样将 d3.json 与我的减速器一起使用：

var url = 'http://localhost:3000/authors';

function cool() {
d3.json(url, function(data) {
dataset = data;
 });
}

  const authorData = (state = dataset, action) => {
    switch (action.type) {
      case 'DATA_CHART_ALL':
        return action.data
      case 'DATA_CHART_FILTER':
        return action.data
          default:
            return state;
                }
              };

export default authorData;

由于 D3.json 是一个回调函数，我的减速器返回未定义。我该如何处理？我可以使用 d3.json 以外的东西吗？

Answer 1

你需要一个在 redux 中充当调度程序的函数：

// redux action using a dispatcher (think middleware)
export function cool(url) {
    return function(dispatch) {
        return d3.json(url, response => {
            dispatch(setData(response))
        }
    }
}

// redux action
export function setData(data) {
 return {
        type: 'DATA_CHART_ALL',
        data
    }
}

const authorDataReducer = (state = {}, action) => {
    switch (action.type) {
      case 'DATA_CHART_ALL':
        return action.data
      case 'DATA_CHART_FILTER':
        return action.data
      default:
        return state;
    }
};

export authorDataReducer;

使用它：

在您的应用程序开始时调用它：

store.dispatch(cool("MY_URL"));

请注意，我没有检查请求中的错误处理