0

我对 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 }))
    ))
);

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

非常感谢您的帮助！

4

1 回答 1

0

问题是of(users)发出一个单一的值：不管users是什么，大概是一个数组。因此，在您find()的参数内部user实际上是完整的users，而不是单个用户，因此users.email === undefined. 该find()运算符的行为与 Array 的类似find()，因为它总是返回（发出）单个值，因此如果没有找到任何内容，则返回（发出）的值实际上就是 value 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 };
    })
  );
于 2021-06-01T17:54:08.167 回答