Redux-saga: лучший способ обрабатывать асин c данные вызовов, используемые только в одном компоненте

Question

Мне нужен совет относительно Redx-саги и способа обработки асинхронного вызова c. Я не нахожу ответов на мои вопросы.

Я хотел бы знать , как я могу правильно обрабатывать асинхронный c вызов API, который возвращает данные, используемые только в одном компоненте (поэтому бесполезно хранить их в хранилище)?

В моем приложении реакции я использую redux-saga для обработки асинхронного вызова c. Когда сага завершена sh правильно, я отправляю успешное действие, которое сохраняет результат в хранилище.

Однако я считаю бесполезным сохранять результат, когда я хочу отобразить его только в одном компоненте. Вместо этого я хотел бы запустить сагу и вернуть данные обратного вызова в мой компонент, не сохраняя их в хранилище. Является ли это возможным ? Как я могу это сделать?

спасибо.

Answer 1

Вот пример кода для вас, этот код делает запрос API в жизненном цикле componentDidMount и устанавливает данные в их состояние и после того, как он их отображает.

import React, { Component } from "react";
import { render } from "react-dom";
import axios from 'axios';

class App extends Component {
  constructor() {
    super();
    this.state = {
      data: []
    };
  }

  async componentDidMount() {
    try {
      let response = await axios.get('https://jsonplaceholder.typicode.com/users');

      console.log('response.data: ', response.data);

      this.setState({
        data: response.data
      });
    } catch (error) {
      console.log('error: ', error);
    }
  }

  render() {
    return (
      <ul>
        {this.state.data.map(item => <li>{item.name}</li>)}
      </ul>
    );
  }
}

Надеюсь, это поможет.