Question

我有一个onReady回调函数，只要从外部库中加载全局对象，该回调函数就会触发。仅在完成身份验证后才加载该对象。

有些页面需要身份验证，而有些页面则不需要，所以我不想在加载页面之前先加载它。

因此，我创建了一个不是组件的服务，该服务会触发先前提到的onReady事件，该事件应设置库已完成加载的标志，并且我可以对其进行处理。我想到的解决方案是在redux存储中全局设置它，然后每触发onReady时，我就将这样设置状态。

export const onReady = event => {
  const dispatch = useDispatch();
  dispatch(setReady());
}

结果出现以下错误：

×
Error: Invalid hook call. Hooks can only be called inside of the body of a function component. This could happen for one of the following reasons:

所以我想知道如何在服务函数中设置全局Redux状态？解决该问题的其他解决方案也将是赞赏的。

Answer 1

您可以直接从Redux使用dispatch：

import { createStore } from 'redux'
const store = createStore(todos, ['Use Redux'])
function addTodo(text) {
  return {
    type: 'ADD_TODO',
    text
  }
}
store.dispatch(addTodo('Read the docs'))
store.dispatch(addTodo('Read about the middleware'))

示例来自：https://redux.js.org/api/store#dispatchaction。

用自己的商店替换store。

或者，您可以将onReady重命名为useOnReady，因此React会将其标记为一个挂钩。

如何在函数（而非组件）中设置redux状态

1 个答案: