使用react-redux创建公共分派函数

Question

我对redux很陌生，在这里我试图创建一个共同的调度函数，我可以从多个组件调用该函数，但似乎不能在我的共同组件中使用useDispatch()获得无效的钩子调用错误。

import { useDispatch, useSelector } from "react-redux";
import { UPDATE_PREVIEW_DATA } from "../../redux/types";
export default function setPreviewData(event, obj, lang) {
const dispatch = useDispatch();
const previewData = useSelector((state) => state.previewData);
const dispatchFunc = () => {
dispatch({
type: UPDATE_PREVIEW_DATA,
data: {
[obj]: {
[lang]: {
...previewData[obj][lang],
[event.target.name]: event.target.value,
},
},
},
});
};
return dispatchFunc;
}

// previewData.js in action folder
import { UPDATE_PREVIEW_DATA } from "../types";
const previewData = (data) => (dispatch) => {
dispatch({
type: UPDATE_PREVIEW_DATA,
data,
});
};
export default previewData;

// previewData.js in reducers folder
import { UPDATE_PREVIEW_DATA } from "../types";
const initialState = {...};
const previewData = (state = initialState, action) => {
switch (action.type) {
case UPDATE_PREVIEW_DATA: {
return action.data;
}
default:
return state;
}
};
export default previewData;

我正在努力使这个工作像

// component.jsx
setPreviewData(e, "hightlights", "en");

Answer 1

钩子只能在Functional组件中使用。根据钩子的规则，它们可以从

调用。

• React功能组件
• 自定义钩子

引用→https://reactjs.org/docs/hooks-rules.html only-call-hooks-from-react-functions

现在你可能认为你的setPreviewData是一个React函数组件，但它只是一个正常的js函数，这就是为什么你得到的错误。因此，它不会被包装在React中。

此外，你在这里犯了一个错误，让我们说，如果setPreviewData是一个函数组件，你仍然调用它，好像它是一个普通的函数