Redux thunk-如何防止它发出不必要的API请求?

问题描述

我有这样的action.js文件:

I have action.js file like this:

import axios from 'axios';

export const SEARCH_TERM = 'SEARCH_TERM';
export const SAVE_SEARCH = 'SAVE_SEARCH';

export function search(query) {
  const githubApi = `https://api.github.com/search/repositories?q=${query}&sort=stars&order=desc`;
  const request = axios.get(githubApi);
  return (dispatch) => {
    request.then(({ data: dataFromGithub }) => {
      dispatch({ type: SEARCH_TERM, payload: query });
      dispatch({ type: SAVE_SEARCH, payloadOne: query, payloadTwo: dataFromGithub });
    });
  };
}

使用reduce，我要保存到redux来存储用户输入的所有搜索词.然后我向github api发出请求，并保存响应数据.

Using reducers I'm saving to redux store all search terms that user inputs.Then I fire a request to github api and save response data as well.

现在我有一个问题，我真的还不知道该如何处理.

Now I have a problem, and I really don't know yet how to deal with it.

我该如何编写代码来检查用户之前是否已经搜索过该查询，在这种情况下，我的应用不会将请求发送给github api.

How can I write code that checks if the user searched already for this query before, and in that case, my app won't fire that request to github api.

我该怎么做以及应该把这个逻辑放在哪里?有什么想法吗?

How can I do this and where I should put this logic? Any ideas?

感谢@klugjo！由于他的暗示，我编写了确实有效的代码.

import React, { Component } from 'react';
import { connect } from 'react-redux';
import { bindActionCreators } from 'redux';
import _ from 'lodash';
import logo from './logo.svg';
import './style.css';

import SearchBar from '../SearchBar';

import { search } from '../../actions/';

class App extends Component {
  startSearch(query) {
    const storedTerms = this.props.storedSearchTerms;
    let foundDuplicate = false;

    if (storedTerms.length === 0) {
      return this.props.search(query);
    }

    if (storedTerms.length !== 0) {
      const testDuplicate = storedTerms.map(term => term === query);
      foundDuplicate = testDuplicate.some(element => element);
    }

    if (foundDuplicate) {
      return false;
    }

    return this.props.search(query);
  }

  render() {
    const searchDebounced = _.debounce(query => this.startSearch(query), 2000);
    return (
      <div className="App">
        <header className="App-header">
          <img src={logo} className="App-logo" alt="logo" />
          <h1 className="App-title">Welcome to React</h1>
        </header>
        <p className="App-intro">
          To get started...
        </p>
        <SearchBar handleSearchQueryChange={searchDebounced} />
      </div>
    );
  }
}

function mapStateToProps(state) {
  return {
    storedSearchTerms: state.searchTerm,
  };
}

function mapDispatchToProps(dispatch) {
  return bindActionCreators({ search }, dispatch);
}

export default connect(mapStateToProps, mapDispatchToProps)(App);

推荐答案

您将不得不从React组件内部进行检查.

You will have to do the check from inside your React component.

根据您的代码，我想说您正在保存已执行的查询列表:

Based on your code, I would say that you are saving the list of queries that were executed:

dispatch({ type: SEARCH_TERM, payload: query });

在您的 .jsx 容器中，仅当过去的查询列表中不存在该查询时，才执行搜索操作.

In your .jsx container, only execute the search action if that query does not exist in your list of past queries.

我认为，从动作创建者内部传递或访问您的redux状态是一种反模式.您可以在此处中阅读更多内容.

In my opinion, passing or accessing your redux state from within the action creator is a an anti pattern. You can read more on that here.

这篇关于Redux thunk-如何防止它发出不必要的API请求?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！