Можно ли сделать запрос REST API из редуктора Redux?

Question

У меня есть компонент React с именем ItemList, который загружает список элементов с сервера API и затем отображает их как список Item компонентов.

Каждый Item имеет кнопку удаления. Когда кнопка нажата, я хочу отправить запрос на сервер API для удаления элемента, а затем повторно отрендерить ItemList.

Один из способов, с помощью которого я могу придумать эту работу, - переместить оба запроса API в редукторы, а затем отправлять действия всякий раз, когда я хочу а) получить все элементы; и б) удалить элемент. После успешного завершения этих операций API редуктор обновит хранилище, а ItemList выполнит повторную визуализацию.

Это разумный подход или плохая идея помещать вызовы API внутри редукторов?

Вот упрощенная версия кода, который у меня есть. Это еще не использует Redux. Я хочу убедиться, что мой подход обоснован до реализации Redux, поэтому этот вопрос переполнения стека.

ItemList.js

class ItemList extends Component {

  constructor(props) {
    super(props);
    this.state = {
      items: []
    };
    this.componentDidMount = this.componentDidMount.bind(this);
  }

  componentDidMount() {
    const url = 'https://api.example.com/api/v1.0/item';
    fetch(url, {
      method: "get"
    })
    .then(res => res.json())
    .then(response => {
      this.setState({items: response.data});
    });
  }

  render() {
    <div>
      {this.state.items.map((item, index) => (
        <Item key={item.id} item={item} />
      ))}
    </div>
  }
}

Item.js

class Item extends Component {

  deleteClicked() {
    /** 
     *  Is it ok to dispatch a "delete item" action 
     *  from here and then make the actual API call 
     *  in a reducer?
     */
  }

  render() {
    <div>
      <h2>{item.title}</h2>
      <a onClick={this.deleteClicked}>delete item</a>
    </div>
  }
}

Answer 1

Вы почти решили свою задачу.Чтобы сделать ваше решение идеальным, используйте Создатели действий для выполнения асинхронных вызовов и отправки действий по завершении.Редуктор должен быть Чистая функция синхронизации .

Например, ItemList компонент может использовать создатель таких действий для извлечения элементов

const ExtractItemsAction = () => (dispatch) => {
    distpatch ({type: ITEMS_REQUESTED});
    const url = 'https://api.example.com/api/v1.0/item';
    fetch(url, {
        method: "get"
    })
    .then(res => res.json())
    .then(response => {
        dispatch({type: ITEMS_RECEIVED, items: response.data});
    });
}

И редуктор останется чистым

function reducer (state = initalState, action)
{
    switch (action.type) {
        case ITEMS_REQUESTED:
            return { ...state, itemsRequested: true }
        case ITEMS_RECEIVED:
            return { ...state, itemsRequested: false, items: action.items }
        default
            return state;
    }
}

И не забудьте подключить ваш компонент к Redux и использовать Redux-thunk в качестве промежуточного программного обеспечения при создании магазина.