Question

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

以下是复杂的ajax工作流程的一些示例：

Ajax Workflow1 。用户在结果表上选择两个不同的过滤器。每个过滤器都会启动一个ajax请求，然后按顺序解析。结果表应显示正确的过滤器选择。错误不应更新结果表。
Ajax Workflow 2
- 用户启动报告生成（这是一个长时间运行的过程）。
- 用户切换到另一个报告。它应该取消或忽略待处理的“等待报告”操作。
更复杂的工作流程（基于旧的redux-saga示例）
- 用户按下登录按钮，启动ajax请求以获取身份验证令牌
- 要么
  - 用户立即按下注销按钮，该按钮应取消/忽略待处理的身份验证操作
  - 或者它应该在解析时存储身份验证令牌
- 应该在注销后清除身份验证令牌或是否发生登录错误

Answer 1

我将尝试第二个工作流程（登录）。

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

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

data和err类型变量表示登录数据类型（令牌）和登录错误。 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＆＃34;单键＆＃34;对象，因为它的名称建议，是一个只有一个键和一个值的对象，例如{ a: 1 }（＆＃34; a＆＃34;是键，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 }; 
}

这些类似于有限状态机中的转换，除非有时数据附加到状态。每个减速器都相当简单，只处理很少的动作类型。只有两个减速器返回效果：

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

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

对于一些数据类型的概念，这个问题比最初出现的问题更容易理解;您可以使用大致相同的reducer进行同样的操作，只使用redux-thunk。

复杂的redux-loop例子？

1 个答案: