Подождите, пока создатель действия завершит sh, прежде чем вызывать другого создателя действия - преобразователь Redux

Question

У меня есть 2 создателя действий в моем приложении под названием createPlaylist и fillPlaylist, чтобы вызвать fillPlaylist, мне нужно сначала вызвать createPlaylist, чтобы получить идентификатор списка воспроизведения (state.playlistDetail.id в fillPlaylist). проблема в том, что когда я вызвал fillPlaylist, createPlaylist по-прежнему извлекает данные, поэтому я не могу вызвать fillPlaylist, потому что state.playlistDetail.id не определен. я хочу подождать, пока createPlaylist завершит запрос, а затем вызвал fillPlaylist, как я могу этого добиться? где я вызвал createPlaylist и fillPlaylist)

import React, {Component} from 'react';
import { connect } from 'react-redux';
import { createPlaylist, fillPlaylist } from '../actions'

class Result extends Component {
    constructor(props) {
        super(props);
        this.state = {}
    }

    createPlaylist = () => {
        this.props.createPlaylist()

        let uris = []

        this.props.recommendations.forEach(item => { 
            uris.push(item.uri)
        })

        this.props.fillPlaylist(uris)
    }

    render() {

        return (
                <div>
                    <h1>Result</h1>
                    <button onClick={this.createPlaylist}>Create Playlist</button>
                </div>
            );
        
    }
}

const mapStateToProps = state => {
    return {recommendations: state.recommendations};
};

export default connect(mapStateToProps, {createPlaylist, fillPlaylist})(Result);

Answer 1

вы сказали, что вам нужно дождаться createPlaylist to fini sh выборки данных, так почему бы не объединить 2 функции в одну, например:

export const createAndFillPlaylist = () => async (dispatch, getState) => {
  try {
    const state = getState();
    let uris = state.recommendations.map(item => item.uri);
    const PlayListBody = JSON.stringify({
      name: "Playlist Name",
      description: "Playlist description"
    });
    const headers = {
      Authorization: "Bearer " + state.token,
      "Content-Type": "application/json"
    };
    const { data } = await spotify.post(
      `/users/${state.user.id}/playlists`,
      PlayListBody,
      { headers }
    );
    dispatch({ type: "CREATE_PLAYLIST", payload: data });
    const createPlaylistBody = JSON.stringify({
      uris: uris
    });
    const response = await spotify.post(
      `/playlists/${data.id}/tracks`,
      createPlaylistBody,
      {
        headers
      }
    );
    dispatch({ type: "FILL_PLAYLIST", payload: response.data });
  } catch (error) {
    throw error;
  }
};

и для компонента не требуется ToMapStateToProps, вот код:

import React, { Component } from "react";
import { connect } from "react-redux";
import { createAndFillPlayList } from "../actions";

class Result extends Component {
  constructor(props) {
    super(props);
    this.state = {};
  }

  render() {
    return (
      <div>
        <h1>Result</h1>
        <button onClick={this.props.createAndFillPlayList}>
          Create Playlist
        </button>
      </div>
    );
  }
}

export default connect(
  null,
  { createAndFillPlayList }
)(Result);

Answer 2

Так как вы используете response-redux, вы уже изучали промежуточное ПО redux-sagas? Это невероятно полезно для управления побочными эффектами, такими как выборка данных, действует как отдельный поток, который может запускаться и останавливаться, и запускать другие действия (саги), когда ваши данные возвращаются.

Я использовал оба redux -thunk и redux-sagas, чтобы помочь с этой проблемой, с которой вы столкнулись. Redux-саги стали намного более рекомендованными старшими разработчиками консалтинговой компании, в которой я работал, и теперь, использовав их дважды, я должен сказать, что определенно предпочитаю их!

https://redux-saga.js.org/