javascript - 动态实时 api 的 Redux 流程？

Question

我正在寻找一些有关 redux 的引用；由于支持多种不同的平台(Java Android、ios swift、ios Obj-c、go、Node.js 和 web javascript)，我模拟了一个实时应用程序管理的解决方案。

关于如何工作的解释相当广泛，但它基本上是一个可以解析数据的休息端点，它专门设计用于生成一个简单的实时 api 管理器和资源 getter ，其在跨平台上的工作方式相同(这是 JS 示例) )；例如。

API.fromURL('https://api.mysite.com/v1').then(loadApi).catch(...);

function loadAPI(api){
   if (!api.user){
     api.login('user','password').then(()=>{
        workWithAPI(api);
     }).catch(...);
   } else {
      workWithAPI(api);
   }
}

function workWithAPI(api){
   console.log(api.user);
   api.user.on('update',(event)=>{
     console.log(event.name === api.user.name); //true
     //changes happen even if you don't have a listener
   });

   if (!api.user.isSubscribed()){
      api.user.subscribe().then(()=>{
         api.user.setName(...).then...;
         save(api.serialize());
      }).catch(...);
   } else {
      api.user.setName(...).then...;
      save(api.serialize());
   }
}

API.fromData(...).then(loadApi).catch(...);

最棒的是，这个 api 对象代表了它所包含的对象的状态，因此，如果您有一个用户对象，它将始终与数据库保持同步，并通过从服务器发送的事件反射(reflect)更改。

问题是如何以有效的方式将这个想法应用到浏览器上下文中的 redux 概念中？...

考虑:

1. api对象中包含的所有对象都存在于store中；但可能存在与 ui 相关的应用状态，但 api 对象状态中不存在。

2. api 对象及其包含的所有内容都是可变的，而 redux 在不变性方面效果更好。

3. api 对象是可序列化的，就像存储一样。

4. api 对象是一棵树，在 redux 模型中使用它不是一个好习惯。

Answer 1

您需要在 Store 状态中同步 API 状态。为了做到这一点，我认为最好的方法是重写或将 API 对象集成到 Redux 中，作为外部操作创建者。

所以我会这样做(考虑到你没有提到 React):

我将维护有关连接的元数据的子树:

{ connecting: false, authenticated: true, status: 'CONNECTED' }

这样，您就可以处理连接中断等情况。还给它一些操作来改变这种状态。

const actions = { reconnectToAPI, logIn, logOut, connectionLost }

(这些项目是操作创建者，我对对象使用了 ES6 语法，{ reconnectToAPI } 与 { reconnectToAPI: reconnectToAPI } 相同)

现在，将这些元数据绑定(bind)到您的事件。

connection.on('lost', reason => {
  dispatch(connectionLost(reason))
  dispatch(reconnectToAPI())
})

登录将是 thunk这将通过您的 API 使用用户名和密码对您进行身份验证。

const logIn = (username, password) => dispatch => {
  return api.authenticate(username, password)
  .then(profile => {
    dispatch(loggedIn(profile))
  }, error => {
    dispatch(failedToLogIn(error))
  })
}

接下来，将您的状态映射到其他树。我建议使用存储增强器或中间件来执行此操作。还可以为其提供一些操作，或者在需要时自动生成它们。