如何在saga文件中使用自定义hooks函数?

huangapple go评论81阅读模式
英文:

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)
}

huangapple
  • 本文由 发表于 2023年6月29日 14:39:51
  • 转载请务必保留本文链接:https://go.coder-hub.com/76578591.html
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定