微信公众号搜"智元新知"关注
微信扫一扫可直接关注哦!

我们可以在 redux Saga 函数中使用 customHooks

如何解决我们可以在 redux Saga 函数中使用 customHooks

自定义钩子作为状态选择器并在“功能视图”组件中使用它。 现在,我需要在 redux Saga 函数中使用它。我们可以在 Saga 函数中使用它吗,或者我必须使用其他方法而不是在 Saga 函数中使用自定义钩子?

export function useSelectAllEntries()
{
return useSelector(
({allEntries=[]}) =>[...allEntries],shallowEqual
);
}

export function useSelectFilteredByMakeEntries()
{
const selectAll = useSelectAllEntries();
return selectAll.filter(...);
}

export function useSelectFilteredByCreatorEntries()
{
const selectAll = useSelectAllEntries();
return selectAll.filter(...);
}

解决方法

不要将它们定义为自定义钩子,而是将它们定义为选择器。 Redux 选择器可以在多个不同的用例之间自由共享。

export const allEntriesSelector = ({ allEntries = [] }) => allEntries;

export const allEntriesFilteredByMakeEntriesSelector = state =>
  allEntriesSelector(state).filter(...);

export const allEntriesFilteredByCreatorEntriesSelector = state =>
  allEntriesSelector(state).filter(...);

然后,当你想在函数组件中使用它们时,只需调用useSelector

function MyComponent() {
  const entries = useSelector(allEntriesSelector);
  const filteredByMake = useSelector(allEntriesFilteredByMakeEntriesSelector);
  const filteredByCreator = useSelector(allEntriesFilteredByCreatorEntriesSelector);

  return (...);
}

以及当您想在传奇中使用它们时:

import { select } from 'redux-saga/effects';

function* mySaga() {
  const entries = yield select(allEntriesSelector);
  const filteredByMake = yield select(allEntriesFilteredByMakeEntriesSelector);
  const filteredByCreator = yield select(allEntriesFilteredByCreatorEntriesSelector);
}

版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。