App Wide Saga: вызов API с одинаковой полезной нагрузкой - PullRequest
Новая
       43

App Wide Saga: вызов API с одинаковой полезной нагрузкой

0 голосов
/ 03 марта 2020

Я использую react-boilerplate. У нас есть сценарий использования, когда мы используем тот же saga вызов в 4-5 container components. В связи с этим реплицировались файлы logi c в actions, selectors, reducers и saga. Итак, мы следовали соглашению, в котором мы конвертировали этот сага-вызов в отдельный Container компонент ( Source Of Idea ). Этот container компонент принимает request как prop и dispatches и action для выполнения вызова API.

Этот Container компонент (отвечающий только за выборку данных) выглядит примерно так, как показано ниже: 

class FetchArticlesData extends React.Component {
        componentDidMount() {
          this.makeApiCall();
        }

        componentDidUpdate(prevProps) {
          // isEqual utility is from lodash for deep comparison of object
          if(!isEqual(prevProps.request, this.props.request))
              this.makeApiCall(); 
        }

        makeApiCall = () => {
         // dispatch action
         this.props.fetchArticlesData(this.props.request);
        }
        
        render() {
         return null;
        }
    }

Я использую выше FetchArticlesData в моем компоненте, как показано ниже: 

class ArticlesData extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      request: null,
    }
  }
  
  render() {
    return (
      ...// code for search panel
      {this.state.request ? 
      <FetchArticlesData request={this.state.request}> : null }
    );
  }
}

Как видно из приведенного выше кода, я удостоверяюсь, что поиск не происходит с тем же запросом (с использованием lodash isEqual) из FetchArticlesData компонента контейнера. Теперь возникает проблема, когда нам нужно снова извлечь данные, используя тот же запрос. С существующими логами c я не могу сделать этот вызов API снова. Как я могу добиться этого?

В настоящее время я достигаю этого, помещая timestamp в request, когда пользователь нажимает кнопку Search. Таким образом, каждый раз метка времени будет отличаться, поэтому будет сделан вызов API. Есть ли другая альтернатива для достижения этой цели?

...