英文:
How can I use custom hooks functions in saga files?
问题
Here's the translated portion:
我在这里使用自定义Hooks与Redux Saga遇到了问题。我对Redux Saga还很陌生,所以不太明白如何调用自定义Hooks函数。
我创建了一个用于调用API函数的自定义Hook,在其中有一个名为userLogin
的函数。现在,我希望每当特定的dispatch action发生时,在saga文件中调用这个相同的函数。
正确的方法是什么?我是否不应该在自定义Hooks内定义我的API函数?
useApi.js
// 自定义useApi钩子
export const useApi = () => {
const api = useAxios();
const userLogin = async (body, config = {}) => {
const res = await api.post(LOGIN, body, config);
return res.data;
};
return {
userLogin,
};
}
userSaga.js
import { takeEvery } from 'redux-saga/effects';
export function* userLoginFunction() {
// 我如何在这里调用我的自定义Hook函数?
// 因为根据Hooks规则,我不能在这里使用这个Hook。
try {
} catch (e) {
}
}
export default function* rootSaga() {
yield takeEvery('USER_LOGIN', fetchNumberSaga);
}
如果你需要进一步的帮助或解释,请随时提出。
英文:
I am having trouble in using the customHooks with my redux saga here. I am new with the redux saga so couldn't able to get my head around calling the custom hooks function here.
I have created a custom hook for calling my api functions in which there is a function userLogin
. Now I want this same function in to be called in the saga file, every time a particular dispatch action occurs.
What is the correct way to approach this. Should I not define my api's function inside a custom hooks ?
useApi.js
//useApi custom hook
export const useApi = () => {
const api = useAxios();
const userLogin = async (body, config = {}) => {
const res = await api.post(LOGIN, body, config);
return res.data;
};
return {
userLogin,
};
}
userSaga.js
import { takeEvery } from 'redux-saga/effects';
export function* userLoginFunction() {
//how can I call my custom hook function here ?
//because according to hooks rules, I cann't use the hook here.
try {
} catch (e) {
}
}
export default function* rootSaga() {
yield takeEvery('USER_LOGIN', fetchNumberSaga);
}
答案1
得分: 1
你不能这样做。React hooks只能在React函数组件
内使用。
但不用担心 🙌。
你可以创建普通的API函数并使用它们。
示例:
api.js
export const api = axios.create({ baseURL: 'https://your-api.com/api/v1' })
user-api.js
import { api } from './api'
export const signIn = async ({ credentials }) => {
const { data: user } = await api.request({
method: 'POST',
url: '/sign-in',
// ... other params
})
return user
}
userSaga.js
import { takeEvery, call } from 'redux-saga/effects';
import { signIn } from './user-api';
export function* userSignInWorker(action) {
try {
const user = yield call(signIn, { credentials: action.payload })
// ... your code
} catch (e) {
// ... error handling
}
}
export default function* rootSaga() {
yield takeEvery('USER_LOGIN', userSignInWorker)
}
英文:
You can't. React hooks can be used only inside React functional components
.
But no worries 🙌.
Instead, you can create plain API functions and use them.
Example:
api.js
export const api = axios.create({ baseURL: 'https://your-api.com/api/v1' })
user-api.js
import { api } from './api'
export const signIn = async ({ credentials }) => {
const { data: user } = await api.request({
method: 'POST',
url: '/sign-in',
// ... other params
})
return user
}
userSaga.js
import { takeEvery, call } from 'redux-saga/effects';
import { signIn } from './user-api';
export function* userSignInWorker(action) {
try {
const user = yield call(signIn, { credentials: action.payload })
// ... your code
} catch (e) {
// ... error handling
}
}
export default function* rootSaga() {
yield takeEvery('USER_LOGIN', userSignInWorker)
}
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库,让每个人都能够通过互相帮助和分享经验来进步。
评论