应该“下一步".总是在Redux中间件中最后被调用? [英] Should "next" always be invoked last in Redux middleware?

问题描述

tl; dr:在Redux中间件函数中，可以在调用 next 完成商店更新后调度新动作吗?

tl;dr: Within a Redux middleware function, is it okay to dispatch a new action after calling next to finish updating the store?

我正在使用 Flutter 和TodoMVC示例.它使用HN的Firebase支持的API提取数据:

I'm building a HackerNews reader using Flutter and built-flutter-redux, based off of Brian Egan's TodoMVC example. It uses HN's Firebase-backed API to pull data:

https://github.com/HackerNews/API

我的动作现在看起来像这样:

My actions look like this right now:

ActionDispatcher<Null> fetchHackerNewsTopStories;
ActionDispatcher<List<int>> fetchHackerNewsTopStoriesSuccess;
ActionDispatcher<Null> fetchHackerNewsTopStoriesFailure;
ActionDispatcher<Null> fetchNextHackerNewsItem;
ActionDispatcher<HackerNewsItem> fetchHackerNewsItemSuccess;
ActionDispatcher<Null> fetchHackerNewsItemFailure;

有一个中间件监听 fetchHackerNewsTopStories 操作并启动对API的调用:

There's a piece of middleware that listens for the fetchHackerNewsTopStories action and kicks off a call to the API:

MiddlewareHandler<AppState, AppStateBuilder, AppActions, Null>
createFetchHackerNewsTopStories(HackerNewsRepository service) {
  return (MiddlewareApi<AppState, AppStateBuilder, AppActions> api,
      ActionHandler next, Action<Null> action) {
    service.fetchHackerNewsTopStories().then((ids) {
      return api.actions.fetchHackerNewsTopStoriesSuccess(ids);
    }).catchError(api.actions.fetchHackerNewsTopStoriesFailure);

    next(action);
  };
}

返回时，我使用ID列表更新应用的状态.

When it returns, I update my app's state with the list of IDs.

在某个时候，我需要调度另一个动作，即 fetchNextHackerNewsItem .还有另一个中间件功能，可以监听该动作并请求第一个故事的详细信息.当这些详细信息到达时，它将请求下一个故事，依此类推，直到所有内容都更新为止.

At some point I need to dispatch another action, fetchNextHackerNewsItem. There's another middleware function that will listen for that action and request the details for the the first story. When those details arrive, it'll request the next story, and so on until everything's updated.

我想知道的是我是否可以这样做:

What I'd like to know is whether I can do this:

// Invoked when REST call for the list of top story IDs completes.
MiddlewareHandler<AppState, AppStateBuilder, AppActions, List<int>>
createFetchHackerNewsTopStoriesSuccess() {
  return (MiddlewareApi<AppState, AppStateBuilder, AppActions> api,
      ActionHandler next, Action<List<int>> action) {
    next(action);
    api.actions.fetchNextHackerNewsItem(); // Is this cool?
  };
} 

// Initiates a request for a single story's details.
MiddlewareHandler<AppState, AppStateBuilder, AppActions, Null>
createFetchNextHackerNewsItem(HackerNewsRepository service) {
  return (MiddlewareApi<AppState, AppStateBuilder, AppActions> api,
      ActionHandler next, Action<Null> action) {
    int nextId = api.state.topStoryIds[api.state.loadedUpToIndex];
    service.fetchHackerNewsItem(nextId).then((item) {
      return api.actions.fetchHackerNewsItemSuccess(item);
    }).catchError(api.actions.fetchHackerNewsTopStoriesFailure);

    next(action);
  };
}

因为 createFetchNextHackerNewsItem 依赖于应用程序的状态( api.state.topStoryIds [api.state.loadedUpToIndex] )，所以我希望它运行在之后，通过 next(action)调用更新商店.

Because createFetchNextHackerNewsItem relies on the app's state (api.state.topStoryIds[api.state.loadedUpToIndex]), I'd like for it to run after the store is updated by the next(action) call.

在调用 next 之后在Redux中间件中调度新动作是否很酷，还是某种反模式?如果 是反模式，那么实现此流程的最佳方法是什么?

Is it cool to dispatch new actions in Redux middleware after calling next, or is that some kind of anti-pattern? If it is an anti-pattern, what's the best way to implement this flow?

推荐答案

是的，很好-中间件可以在调度动作时按字面意思执行任何操作.其中包括修改/记录/延迟/交换/忽略原始操作，以及分派其他操作.

Yes, it's fine - a middleware can do literally anything it wants when an action is dispatched. That includes modifying / logging / delaying/ swapping / ignoring the original action, as well as dispatching additional actions.

这篇关于应该“下一步".总是在Redux中间件中最后被调用?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！