ComponentDidMount Redux-Saga操作不起作用

Question

I have a react component that is fetching data from an api using axios in the ComponentDidMount() function. For some reason, the request flow stops at LOAD_PLAYLISTS_REQ, instead of continuing onto LOAD_PLAYLISTS_SUCCESS.

Though if I trigger the same through a button click, the flow does get the data from API and calls the action, LOAD_PLAYLISTS_SUCCESS.

Is there a way to fix this issue?

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()]
}

reducers/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;
}

actions/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

I believe this problem occurs because the scripts referring to the sagas of your project have not been fully loaded. Therefore, a possible solution would be to dispatch the action only after everything has been loaded, and can do the following:

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

As we can see above, even with the mounted component, the action is only triggered when the whole page is loaded, to ensure that all its sagas are loaded. This works for me. ;)

Answer 2

Here are 2 things that look off right off the bat

1. Remove the * in front of the yield in the watchRequest function.
2. import all from redux-saga/effects and change the rootSaga to

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

Try these and see if your problem gets resolved

Edit:

Try changing the mapDispatchToProps to

const mapDispatchToProps = { selectNewsPlaylist, getPlaylist }