3

redux-loop有没有用于处理复杂 ajax 工作流的示例？官方回购非常简约。从我能找到的一个野外例子（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 请求以获取身份验证令牌
    • 任何一个
      • 用户立即按下注销按钮，该按钮应取消/忽略待处理的身份验证操作
      • 或者它应该在解析时存储身份验证令牌
    • 注销后或发生登录错误时应清除身份验证令牌
4

1 回答 1

2

我将介绍第二个工作流程（登录）。

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

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

wheredata和errare 类型变量代表登录数据类型（令牌）和登录错误。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)
  });
}

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

{
  LoggedOut : true
}


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

{
  Pending : true
}

清理完之后，这里是主减速器中使用的子减速器：

// 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 都相当简单，只处理很少的动作类型。只有两个减速器返回效果：

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

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

有了一些数据类型的概念，这个问题可能比最初看起来更容易推理；你可以用结构大致相同的减速器做同样的事情，只使用redux-thunk.

于 2017-03-19T10:10:06.283 回答