无效钩子调用(redux-saga)

Question

import { firestore as db } from "../../components/firebase/firebase";
import { getAuth } from "firebase/auth";
import { useSelector } from "react-redux";

export const save = async () => {
  const data = useSelector((state: any) => state.canvas.canvas);
  const auth: any = getAuth();
  await db.collection("images").add({
    user: auth.currentUser.displayName,
    data: data,
  });

  return data;
};

我有这个密码。在那里，我需要从redux存储中获取图像url，并将其保存到防火墙中，但是我收到了一个错误“无效的钩子调用。钩子只能在函数组件的主体内调用”。我怎么才能修好它？此代码是从saga调用的：

export function* imgWorker() {
  const Image: { img: string } = {
    img: "",
  };

  try {
    yield save().then((img) => {
      Image.img = img;
    });
    yield put(saveImgSucceed(Image.img));
  } catch (error) {
    console.log("imgSaga", error);
    yield put(saveImgFailed());
  }
}

export function* saveImg() {
  yield takeEvery(GET_IMAGE_DATA, imgWorker);
}

Answer 1

​

import { firestore as db } from "../../components/firebase/firebase";
import { getAuth } from "firebase/auth";
import { useSelector } from "react-redux";
import { select, call, takeEvery, put } from "redux-saga/effects"

export const save = function* ()  {
  const data = yield select((state: any) => state.canvas.canvas);
  const auth: any = getAuth();
  
  return yield call(() => db.collection("images").add({
    user: auth.currentUser.displayName,
    data: data,
  }));
};

export function* imgWorker() {
  const Image: { img: string } = {
    img: "",
  };

  try {
    Image.img = yield call(save);
    yield put(saveImgSucceed(Image.img));
  } catch (error) {
    console.log("imgSaga", error);
    yield put(saveImgFailed());
  }
}

export function* saveImg() {
  yield takeEvery(GET_IMAGE_DATA, imgWorker);
}

​