ajax - 复杂的 redux-loop 例子？

Question

有没有使用 redux-loop 来处理复杂的 ajax 工作流的例子？官方 repo 非常简约。从我能够找到的一个野外示例(https://hackernoon.com/why-i-wrote-a-redux-async-outerware-277d450dba74#.2ocaloc58)来看，redux-loop 似乎与 redux-thunk 非常相似。

下面是一些复杂的 ajax 工作流示例:

• Ajax 工作流1。用户在结果表中选择两个不同的过滤器。每个过滤器发起一个 ajax 请求，然后乱序解析。结果表应显示正确的过滤器选择。错误不应更新结果表。
• Ajax 工作流 2
  • 用户开始生成报告(这是一个长时间运行的过程)。
  • 用户切换到另一个报告。它应该取消或忽略未决的“等待报告”操作。
• 更复杂的工作流程(基于旧的 redux-saga 示例)
  • 用户按下登录按钮，启动 ajax 请求以获取授权 token
  • 要么
    • 用户立即按下注销按钮，这应该取消/忽略待处理的授权操作
    • 或者它应该在解析时存储授权 token
  • 应在注销后或发生登录错误时清除授权 token

Answer 1

我将尝试第二个工作流程(登录)。

在进入代码之前，值得注意的是 redux-loop 在异步控制流方面比 redux-saga 简单得多并且提供的功能更少。但本着 Elm 的精神，重点是数据流 - 毫不奇怪，通常是通过数据类型实现的。因此，从静态类型语言的角度来思考是有帮助的。在 Haskell 或 Elm 中，按数据类型对问题建模可能是有益的，数据类型本身对状态机进行编码:

data LoginStatus data err =
    LoggedOut       | 
  , LoggedIn data   |
  , LoginError err  | 
  , Pending

其中data和err是类型变量，代表登录数据类型(tokens)和登录错误。 JavaScript 是动态类型的，没有表达相同想法的好处 - 但是有很多动态技巧可以用来模仿标记的联合类型，如 LoginStatus。事不宜迟，这里是代码:

import {match} from "single-key";

export default function reducer(state, action) {
  return match(state, {
    LoggedOut : () => loggedOutReducer(state, action),
    LoggedIn  : () => loggedInReducer(state, action),
    Pending : () => pendingReducer(state, action),
    LoginError : () => loginErrorReducer(state, action)
  });
} 

在这里，我将使用一个简单且鲜为人知的库 singe-key实现非常基本的运行时联合类型。顾名思义，“单键”对象是只有一个键和一个值的对象，例如 { a: 1 } (“a”是键，1 是值).我们将使用单键对象对状态进行建模 - 不同的键代表 LoginStatus 的不同变体。几个示例状态:

{
  LoggedOut : true
}


{
  LoggedIn : {
    token : 1235,
    user : { firstName: "John" }
  }
}

{
  Pending : true
}

清理完后，这里是主 reducer 中使用的子 reducer :

// state :: { LoggedIn: {/* some data * } }
function loggedInReducer(state, action) {
  if (action.type === LOGOUT) {
    return {
      LoggedOut : true
    };
  }
  return state;
}
// state :: { Pending : true }
function pendingReducer(state, action) {
  if (action.type === LOGIN_SUCCESS) {
    return {
      LoggedIn : {
        token : action.payload.token,
        user  : action.payload.user
      }
    };
  }
  if (action.type === LOGIN_ERROR) {
    return {
      LoginError : action.payload;  
    };
  }
  if (action.type === LOGOUT) {
    return {
      LoggedOut : true  
    };
  }
  return state;
}
// state :: { LoggedOut : true }
function loggedOutReducer(state, action) {
  if (action.type === LOGIN) {
    return loop({ Pending: true }, Effects.promise(loginRequest));  
  }
  return state;
}
// state :: { LoginError : error }
function loginErrorReducer(state, action) {
  if (action.type === LOGIN) {
    return loop({ Pending: true }, Effects.promise(loginRequest));  
  }
  return { LoggedOut : true }; 
}

这些就像有限状态机中的转换，除了有时状态附加数据。每个单独的 reducer 都相当简单，可以处理很少的 Action 类型。只有两个 reducer 返回效果:

return loop({ Pending: true }, Effects.promise(loginRequest));

这会将状态从 LoggedOut/LoginError 转换为 Pending 并指定一些副作用 - 这将由 redux- 安排循环。您甚至可以将两个变体合并为一个:{ LoggedOut : error | null }，但我觉得有一个单独的 LoginError 状态从长远来看是有益的。

有了一些数据类型的概念，这个问题可能比第一次出现时更容易推理；你可以用结构大致相同的 reducer 做同样的事情，只使用 redux-thunk。