单击按钮时如何 运行 调度 saga 函数?

How to run dispatch on a saga function when a button is clicked?

我有一个用例,我可能稍后会在游戏中调度动作 (saga)。我有一个应用程序,用户在其中填写表格,稍后当用户单击提交时,将调用 saga 操作,通过它我将从 api 获得响应。但我还有另一个工人传奇,在应用程序初始化时 运行。不知何故只有初始化工作其他叉子不工作-

sagas/applicationSaga.js

export function* initialize() {
  yield call(getAppInfo);
}

export function* getAppInfo() {
  try {
    const appInfo = (yield call(
      AppApi.getAppInfo
    )).data;
  } catch (e) {
    throw new Error(e);
  }
}

export function* submitDecision({payload}) {
  try {
    const submitDecision = yield call(AppApi.submitDecision, payload)
  } catch (e) {
    throw new Error(e);
  }
}

export function* applicationSaga() {
  yield fork(takeEvery, ActionTypes.INITIALIZATION_REQUESTED, initialize);
  yield fork(takeEvery, ActionTypes.SUBMIT_DECISION, submitDecision)
}

sagas/index.js

import { applicationSaga, initialize } from "./applicationSaga";

export default function* rootSaga() {
  yield all([applicationSaga(), initialize()]);
}

这是在 Saga 中调用生成器函数的方法。 Store、actions 和 reducers 必须正确实现,以使应用程序与数据同步。请看看How do I call a Redux Saga action in a `onClick` event?这个

yourJS.js

import store from "YOUR_LOCATION/store";

submit = () => {
  store.dispatch({type: "SUBMIT", payload: YOUR_PAYLOAD});
}

<button onClick={this.submit}>Submit</button>

SAGA.js

import { takeLatest } from "redux-saga/effects";

export const watchSubmit = function* () {
    yield takeLatest("SUBMIT", workerSubmit);
};


function* workerSubmit(action) {
    try {
    // Your code
    } catch {
        message.error("Failed")
    }
}

我得到了实现这个的方法-

export function* initialize() {
  yield take(ActionTypes.INITIALIZATION_REQUESTED);
  yield call(getAppInfo);
}

export function* submitDecision({payload}) {
  try {
    const submitDecision = yield call(AppApi.submitDecision, payload)
  } catch (e) {
    throw new Error(e);
  }
}
export function* applicationSaga() {
  yield all([
    initialize(),
    takeEvery(ActionTypes.SUBMIT_DECISION, submitDecision)
  ]);
}

sagas/index.js

import { all } from "redux-saga/effects";
import { applicationSaga } from "./applicationSaga";

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

基本上我必须在 root saga 中放弃所有,在我的实际应用程序 saga 中我可以继续添加附加到我的 watcher saga 的工人。