0

我有一个连接到商店的容器，它每秒更新一次：

return ({ match, ui }, { matchId }) => ({
    value: match.getIn([matchId, 'masterCurrentTime'], 0), // about every second
    min: ui.get('seekStart'),
    max: ui.get('seekEnd'),
    highlightList: selectHighlights(matchId) // i only want to do this on first render
  });

然而，其中一个属性 (highlightList) 做了以下两件事之一：

1) 从 sessionStorage 返回一个值

或者

2) 下载一个文件，保存到 sessionStorage 然后返回

当然，我不想每秒都这样做，只是第一次。

我创建了一个这样的选择器

const selectHighlights = createSelector(
    matchId => matchId,
    matchId => {
      if (matchId !== null) {
        getTimelineWithFilter(matchId, ['round_start'])
          .then(timeline => {
            console.log(timeline);
            return timeline;
          })
          .catch(error => {
            throw new Error('failed to load highlights', error);
          });
      }

      return null;
    }
  );

但它不起作用，它没有被渲染。但是，如果我做一个替代版本，我将结果存储在一个变量中，然后查询它，事情就会起作用。它只运行一次并按我喜欢的方式执行

// highlightList: currentTimeline === undefined ? loadHighlights(matchId) : currentTimeline,

我只是想学习如何以正确的方式做到这一点，有这方面知识的人可以给我一些最佳实践技巧吗？

4

1 回答 1

1

如何处理 React-Redux 应用程序中的承诺？

假设您有一个用于从某个 API 获取数据的操作创建器。您将从组件中调度操作（加载/单击/其他事件）。

export function loadData(key) {
  return {
    types: [LOAD_DATA, LOAD_DATA_SUCCESS, LOAD_DATA_FAIL]
    promise: () => fetch(...), // API call that returns a promise
    key,
  }
}

现在为基于 Promise 的操作创建一个中间件。确保您applyMiddleware在创建store.

中间件最常见的用例是支持异步操作，无需太多样板代码或对 Rx 等库的依赖。它通过让您在正常操作之外调度异步操作来实现这一点。

export default function clientMiddleware() {
  return ({ dispatch, getState }) => next => (action) => {
    if (typeof action === 'function') {
      return action(dispatch, getState);
    }

    const { promise, types, ...rest } = action;

    if (!promise) {
      return next(action);
    }

    const [REQUEST, SUCCESS, FAILURE] = types;

    next({ ...rest, type: REQUEST });

    const actionPromise = promise();
    actionPromise
      .then(result => next({ ...rest, result, type: SUCCESS }))
      .catch(error => next({ ...rest, error, type: FAILURE }));

    return actionPromise;
  };
}

最后这是你的initialState：

const initialState = {
  isLoading: false,
  isLoaded: false,
  data: {},
  error: null,
};

和 减速器：

case LOAD_DATA:
  return {
    ...state,
    isLoading: true
  };

case LOAD_DATA_SUCCESS:
  return {
    ...state,
    isLoading: false,
    isLoaded: true,
    data: action.result,
  };

case LOAD_DATA_FAIL:
  return {
    ...state,
    isLoading: false,
    isLoaded: false,
    error: action.error
  };
于 2016-12-03T11:35:26.130 回答