Redux 创建 Github 搜索应用-JavaScript中文网-JavaScript教程资源分享门户

Redux 是一个非常流行的 JavaScript 应用程序状态管理库，它允许您更轻松地管理应用程序的状态并跟踪它的变化。在本文中，我们将讨论如何使用 Redux 创建一个 Github 搜索应用程序。

前置知识

在阅读本文之前，您需要了解以下概念：

React 组件
Redux store
Redux reducers
Redux actions

如果您还不熟悉以上概念，请先阅读相关文档。

创建一个 Redux store

我们首先需要创建一个 Redux store，它将存储我们应用程序的状态。在这个例子中，我们的状态将包括以下字段：

searchTerm：用户输入的搜索词
searchResults：Github 的搜索结果

我们使用 Redux 的 createStore 方法创建一个 store，并将一个 reducer 传递给它。该 reducer 将负责处理所有的 action 并更新 store 中的状态。

// javascriptcn.com 代码示例
import { createStore } from 'redux';

const initialState = {
  searchTerm: '',
  searchResults: []
};

function reducer(state = initialState, action) {
  switch (action.type) {
    case 'SET_SEARCH_TERM':
      return {
        ...state,
        searchTerm: action.payload
      };
    case 'SET_SEARCH_RESULTS':
      return {
        ...state,
        searchResults: action.payload
      };
    default:
      return state;
  }
}

const store = createStore(reducer);

上面的代码创建了一个名为 store 的 Redux store，并将其初始化为 initialState 对象。我们还定义了一个名为 reducer 的函数，它将根据传入的 action 更新 store 中的状态。在这个例子中，我们定义了两个 action 类型：SET_SEARCH_TERM 和 SET_SEARCH_RESULTS。

创建一个搜索组件

接下来，我们创建一个搜索组件，它将包含一个输入框和一个按钮，用户可以在其中输入要搜索的 Github 用户名或项目名称。

// javascriptcn.com 代码示例
import React, { useState } from 'react';
import { useDispatch } from 'react-redux';

function Search() {
  const [searchTerm, setSearchTerm] = useState('');
  const dispatch = useDispatch();

  const handleSubmit = (event) => {
    event.preventDefault();
    dispatch({ type: 'SET_SEARCH_TERM', payload: searchTerm });
    // TODO: 发起 Github API 请求并更新 searchResults
  };

  return (
    <form onSubmit={handleSubmit}>
      <input
        type="text"
        value={searchTerm}
        onChange={(event) => setSearchTerm(event.target.value)}
      />
      <button type="submit">搜索</button>
    </form>
  );
}

上面的代码中，我们使用了 React 的 useState hook 来管理输入框的值。当用户输入搜索词时，我们将其存储在 searchTerm 状态中。当用户点击搜索按钮时，我们将 searchTerm 发送给 store，以便在后续的 API 请求中使用。

发起 Github API 请求

现在，我们需要发起一个 API 请求，以获取与用户输入的搜索词匹配的 Github 用户或项目。我们使用 Github 的 REST API v3 进行搜索，并将结果存储在 store 中。

// javascriptcn.com 代码示例
import axios from 'axios';
import { useDispatch, useSelector } from 'react-redux';

function SearchResults() {
  const searchTerm = useSelector((state) => state.searchTerm);
  const searchResults = useSelector((state) => state.searchResults);
  const dispatch = useDispatch();

  useEffect(() => {
    const searchGithub = async () => {
      const response = await axios.get(`https://api.github.com/search/repositories?q=${searchTerm}`);
      dispatch({ type: 'SET_SEARCH_RESULTS', payload: response.data.items });
    };

    if (searchTerm) {
      searchGithub();
    }
  }, [searchTerm, dispatch]);

  return (
    <ul>
      {searchResults.map((result) => (
        <li key={result.id}>{result.name}</li>
      ))}
    </ul>
  );
}

上面的代码中，我们使用了 React 的 useEffect hook 来发起 API 请求。当 searchTerm 发生变化时，我们将发起一个 GET 请求，以获取与搜索词匹配的 Github 用户或项目。一旦我们收到 API 响应，我们将结果存储在 store 中，以便在后续的渲染中使用。

总结

在本文中，我们介绍了如何使用 Redux 创建一个 Github 搜索应用程序。我们了解了如何创建一个 Redux store、如何定义 reducer 和 actions，以及如何使用 React 组件与 Redux store 交互。我们还介绍了如何使用 Github 的 REST API v3 发起搜索请求，并将结果存储在 Redux store 中。通过学习本文，您应该能够更好地理解 Redux 和 React 在应用程序状态管理方面的作用。

来源：JavaScript中文网，转载请注明来源本文地址：https://www.javascriptcn.com/post/656a9b3fd2f5e1655d30398f