ComponentDidMount Redux-Saga操作不起作用

Question

我有一個React組件，它使用ComponentDidMount（）函數中的axios從api提取數據。 由於某種原因，請求流在LOAD_PLAYLISTS_REQ停止，而不是繼續到LOAD_PLAYLISTS_SUCCESS。

盡管如果我通過單擊按鈕觸發相同操作，則該流程確實會從API獲取數據並調用操作LOAD_PLAYLISTS_SUCCESS。

有沒有解決此問題的方法？

sagas.js

import { takeEvery, takeLatest } from 'redux-saga';
import { put, call } from 'redux-saga/effects'
import axios from 'axios';

export function* loadPlaylists({ payload }) {
    console.log("Loading Playlists");
    try {
        const response = yield call(axios.get, "http://localhost:5000/v1/browse/categories/trending/playlists");
        console.log(response);

        yield put({ type: 'LOAD_PLAYLISTS_SUCCESS', response }); // Yields effect to the reducer specifying the action type and user details
    } catch (error) {
        throw error;
    }
}

export function* watchRequest() {
    yield* takeLatest('LOAD_PLAYLISTS_REQ', loadPlaylists);
}

export default function* rootSaga() {
    yield [watchRequest()]
}

減速器/ index.js

export default function(state = null, action) {
  console.log(action);
  switch (action.type) {
    case "LOAD_PLAYLISTS_SUCCESS":
      return action.response.data;
      break;
  }
  return state;
}

動作/ index.js

export const getPlaylists = payload => {
  return {
    type: 'LOAD_PLAYLISTS_REQ',
    payload: payload
  }
}

playlisttiles.js

  class PlaylistTiles extends Component {
  constructor(props) {
    super(props);
    this.handleClick = this.handleClick.bind(this);
  }

  componentDidMount() {
    this.props.getPlaylists("topstories");
  }

  handleClick(e) {
    e.preventDefault();
    this.props.history.push("/browse/1");
  }

  createPlaylist(newsItem) {
    return newsItem.articles.map(newsArticle => {
      return <li key={newsArticle.id}>{newsArticle.headline}</li>;
    });
  }

  createTiles() {
    return this.props.featuredNews.map(newsItem => {
      const {category} = this.props.category;
      return (
        <div
          key={newsItem.featuredId}
          className="card mb-4"
          onClick={() => this.props.getPlaylists(category)}
        >
          <img
            className="card-img-top"
            src="http://via.placeholder.com/150x150"
            alt="Card image cap"
          />
          <div className="card-body">
            <p>{newsItem.title}</p>
            <button onClick={this.handleClick}>Check Playlist</button>

            {/* <p className="card-text">{newsItem.articles[0].headline}</p>  */}
            {/* { this.createFeaturedPlaylist(newsItem) } */}
          </div>
        </div>
      );
    });
  }

  render() {
    const { playlist } = this.props;
    return (
      <Grid width={320} gap={4}>
        {this.createTiles()}
        {JSON.stringify(playlist)} 
      </Grid>
    );
  }
}


function mapStateToProps(state) {
  return {
    featuredNews: state.featuredNews,
    playlist: state.playlistItem
  };
}

function matchDispatchToProps(dispatch) {
  return bindActionCreators(
    {
      selectNewsPlaylist: selectNewsPlaylist,
      getPlaylists: getPlaylists
    },
    dispatch
  );
}

export default connect(
  mapStateToProps,
  matchDispatchToProps
)(withRouter(PlaylistTiles));

Answer 1

我相信會發生此問題，因為引用項目的Sagas的腳本尚未完全加載。 因此，一種可能的解決方案是僅在加載完所有內容后才分派操作，並且可以執行以下操作：

正如我們在上面看到的，即使使用已安裝的組件，也僅在加載整個頁面時才觸發操作，以確保加載其所有的事件。 這對我有用。 ;）

Answer 2

這是兩件事看起來很快

1. 刪除watchRequest函數中yield前面的* 。
2. 從redux-saga / effects導入all ，並將rootSaga更改為

export default function* rootSaga() { yield all [watchRequest()] }

嘗試這些，看看您的問題是否得到解決

編輯：

嘗試將mapDispatchToProps更改為

const mapDispatchToProps = { selectNewsPlaylist, getPlaylist }