Redux-Observable：find() 不返回任何内容

Question

我对 RxJs 很陌生，到目前为止只使用过 Redux (+Thunk)，所以我试图了解一切是如何协同工作的。我目前正在尝试使用从登录表单提交的数据从源（json 文件）中获取用户。

authEpic.js

    import users from '../api/users.json';
    
    const source = of(users);
    
    export const authEpic = (action$) => action$.pipe(
    ofType("AUTH_LOGIN_REQUEST"),
    switchMap(({ authData }) => source.pipe(
        find(user => authData.email === user.email && authData.password === user.password),
        map(user => ({ type: "RESULTS", results: user }))
    ))
);

但是即使它说作为属性返回的值也没有返回任何内容。我想了解如何找到用户并将其传递给另一个操作，因为尽管到处寻找，但我现在几乎一无所知。

非常感谢您的帮助！

Answer 1

问题在于of(users) 发出一个值：无论users 是什么，都可能是一个数组。因此，在您的find() 中，参数user 实际上是完整的users，而不是单个用户，因此是users.email === undefined。 find() 运算符的作用类似于 Array 的 find()，因为它将始终返回（发出）单个值，因此如果没有找到，返回（发出）的值实际上就是值 undefined。这就是这里发生的事情。你正在发出一个动作{ type: 'RESULTS', results: undefined }

如果users 确实是一个数组，您可能希望使用from(users) 以便每个用户都由 Observable 一个接一个地发出。然后它就像我想象的那样工作。这是一个演示：https://stackblitz.com/edit/redux-observable-playground-rararm?file=index.js

如果这最终成为生产代码，您将需要处理找不到用户匹配的情况。

---

顺便说一句，我想这不是生产代码（将所有密码以明文形式作为本地 json 文件保存），但对于阅读本文的任何人来说，注意在这种特殊情况下，它可能会有所帮助更清楚地使用数组而不是 Observable：

export const authEpic = (action$) =>
  action$.pipe(
    ofType('AUTH_LOGIN_REQUEST'),
    // Note this is now `map` instead of `switchMap`
    map(({ authData }) => {
      const user = users.find(
        (user) =>
          authData.email === user.email && authData.password === user.password
      );

      // Some how handle no match (e.g. wrong email or password)
      if (!user) {
        return { type: 'NO_RESULTS' };
      }

      return { type: 'RESULTS', results: user };
    })
  );