Using dvajs, to dispatch an effects in a stateless component will keep sending requests?

in the model file

import { articleDetail } from "../../service/api";
export default {
  namespace: "article",

  state: {
    detail: null
  },
  
  reducers: {
    saveDetail(state, { payload }) {
      return {
        ...state,
        detail: payload
      };
    }
  },

  effects: {
    *articleDetail({ payload: threadId }, { call, put }) {
      const res = yield call(articleDetail, threadId);
      if (res.code === 200) {
        yield put({
          type: "saveDetail",
          payload: res.data
        });
      }
    },
  }
}

in the component

import React from "react";
import { connect } from "dva";

function ArticleDetail({ match, dispatch }) {

  dispatch({
    type: "article/articleDetail",
    payload: match.params.id
  });

  return (
    <div>detail/{match.params.id}</div>
  );
}

export default connect(({ article }) => ({ article }))(ArticleDetail);

how to get a request correctly in a stateless component

Mar.30,2021

did you call articleDetail in articleDetail?

effects: {
    *articleDetail({ payload: threadId }, { call, put }) {
      // articleDetail
      const res = yield call(articleDetail, threadId);
      if (res.code === 200) {
        yield put({
          type: 'saveDetail',
          payload: res.data
        });
      }
    },
  }

you can't dispatch an effect. directly in stateless

import React from 'react';
import { connect } from 'dva';

function ArticleDetail({ match, dispatch }) {

  //dispatch({
  //  type: 'article/articleDetail',
  //  payload: match.params.id
  //});

  return (
    <div>detail/{match.params.id}</div>
  );
}

export default connect(({ article }) => ({ article }))(ArticleDetail);

comments cannot be written that way.
if you want to load the page for the first time, please write it in subscriptions , or in the componentDidMount () method

.

the answer on the second floor is correct, and the same situation is encountered, because the name of the request is the same as in effects, which results in repeated calls.

effects: {
    *articleDetail({ payload: threadId }, { call, put }) {
      // articleDetail
      const res = yield call(articleDetail, threadId);
      if (res.code === 200) {
        yield put({
          type: 'saveDetail',
          payload: res.data
        });
      }
    },
  }

articleDetail just change one

Menu