如何实施Flux / Redux Action授权或可用性

Question

要求

我们目前正在构建一个应该与HATEOAS REST-API一起使用的客户端应用程序。这意味着API本身告诉我们当前可用的进一步操作 - 与授权相当。

例如： 我们有一个实体Projects和一个组件ProjectWidget，它基本上是一个分页的项目列表。默认情况下，Server API为我们提供了前10个项目，并且 - 取决于是否还有更多 - 将URL集成到接下来的10个项目中。这样一个列表的第2页的JSON-Reponse如下所示：

{
   "_embedded" : [ ... ], // list of project-entities
   "_links" : {
      "prev" : "myApi.com/projects?page=1"
      "self" : "myApi.com/projects?page=2"
      "next" : "myApi.com/projects?page=3"
   }
}

在第1页上，links部分只是缺少prev属性，因为没有上一页。在我的组件中，我想显示Previous和Next按钮，具体取决于响应中是否有这些属性。

结论：我的应用程序不知道哪些操作可用以及何时可用。这意味着当前可用的操作也属于当前应用程序的状态以及数据本身。

使用Flux / Redux构建

现在我想以某种方式将其用于使用例如redux的通量架构（具体实现在这一点上并不重要）。

当然，对我的server-api的异步调用需要进入 ActionCreator ，然后在服务器响应时有两个任务：

1. Dispatch将数据本身放入商店的行动
2. 调度行动将下一个可用的行动（或至少是如何创建它们的信息）放入商店

该模型可能如下所示：

{
  projects: {
     data: [...], // the list of my projects
     actions: {
        previous: 'myApi.com/projects?page=1' // Prepared action to load the previous 10 
        next: 'myApi.com/projects?page=3' // Prepared action to load the next 10 Projects
     }
  }
}

然后 ActionCreator 需要如下所示：

export loadProjectsFrom(href){
   return () => {
      myApi
      .get(href)
      .subscribe((response) => {
          store.dispatch({type: 'LOADED_PROJECTS', payload: response._embedded})
          store.dispatch({
             type: 'LOADED_PROJECTS_ACTIONS', 
             payload: {next: response._links.next, prev: reponse._links.prev})
      });
   } 
}

然后，ViewComponent可以轻松订阅 - 操作和项目，并根据商店中提供的信息创建新操作：

let state = store.getState();
if(state.projects.actions.next){
   // Render the button with onclick event calling the function below
}

onClick() {
    let href = store.getState().projects.actions.next;
    let loadAction = actionCreator.loadProjectsFrom(href);
    store.dispatch(loadAction);
}

我的问题

1. 我的结论是否正确，可用的行动是国家的一部分？
2. 从直接从商店获取的信息创建动作是一种好的模式吗？ （似乎它引入了两者之间的紧密耦合）
3. 是否有任何替代方法可以实现此类 Actionauthorization 或 -availability ？