RxJS 6 与 Recompose：构建 React 中的 GitHub 搜索功能

2023-11-07 11:48:05

前言

在本文中，我将演示如何使用 RxJS 6 和 Recompose 在 React 中构建一个 GitHub 搜索功能。这篇文章适合有一定 React 和 RxJS 使用经验的读者。我将分享一些我个人在设计这个 UI 时觉得有用的模式。代码托管在我的 Github 上，master 分支是一个已完成的项目，而 feature/rxjs-recompose 分支包含了本文中提到的代码。

为什么选择 RxJS 和 Recompose？

RxJS 是一个用于处理异步数据流的库。它提供了许多操作符，可以帮助你轻松地处理各种异步操作，例如网络请求、计时器和事件处理。RxJS 6 是最新版本，它引入了一些新的特性和改进，使其更易于使用。

Recompose 是一个 React 库，它允许你以函数式风格编写 React 组件。这使得你的代码更易于阅读和维护，尤其是当你处理复杂的组件时。Recompose 还提供了一些有用的高阶组件（HOC），可以帮助你轻松地实现常见的功能，例如状态管理、事件处理和数据绑定。

项目结构

项目的结构非常简单，有一个 index.js 文件作为入口，一个 App.js 文件作为根组件，一个 Search.js 文件作为搜索组件，一个 Results.js 文件作为结果组件，以及一个 style.css 文件作为样式表。

实现步骤

1. 安装依赖项

首先，我们需要安装 RxJS 和 Recompose：

npm install rxjs recompose --save

2. 创建 App 组件

App 组件是根组件，它负责渲染搜索组件和结果组件。

import React from 'react';
import Search from './Search';
import Results from './Results';

const App = () => (
  <div>
    <Search />
    <Results />
  </div>
);

export default App;

3. 创建 Search 组件

Search 组件负责处理用户输入和搜索请求。

import React, { useState } from 'react';
import { Observable } from 'rxjs';
import { debounceTime, distinctUntilChanged, switchMap } from 'rxjs/operators';
import Recompose from 'recompose';

const Search = () => {
  const [query, setQuery] = useState('');

  const search$ = Observable.fromEvent(document, 'input')
    .pipe(
      debounceTime(300),
      distinctUntilChanged(),
      switchMap(e => Observable.ajax.getJSON(`https://api.github.com/search/repositories?q=${e.target.value}`))
    );

  return (
    <input
      type="text"
      value={query}
      onChange={e => setQuery(e.target.value)}
    />
  );
};

export default Recompose.pure(Search);

4. 创建 Results 组件

Results 组件负责渲染搜索结果。

import React from 'react';

const Results = ({ results }) => (
  <ul>
    {results.map(result => (
      <li key={result.id}>{result.full_name}</li>
    ))}
  </ul>
);

export default Results;

5. 样式

input {
  width: 100%;
  padding: 12px 20px;
  margin: 8px 0;
  box-sizing: border-box;
  border: 1px solid #ccc;
  border-radius: 4px;
}

ul {
  list-style-type: none;
  padding: 0;
  margin: 0;
}

li {
  padding: 12px 20px;
  margin-bottom: 8px;
  background-color: #f1f1f1;
  border: 1px solid #ccc;
  border-radius: 4px;
}