Как я могу установить избыточное состояние в функции (не компонент)

Question

У меня есть обратный вызов onReady, который срабатывает всякий раз, когда глобальный объект загружается из внешней библиотеки. Объект загружается только после завершения аутентификации.

Есть страницы, требующие аутентификации, а некоторые нет, поэтому я не хочу загружать их перед загрузкой страницы.

Поэтому я создал сервис, который не является компонентом, который запускает ранее упомянутое событие onReady, которое должно установить флаг, когда библиотека закончила загрузку, и я мог бы с этим что-то делать. Решение, которое мне пришло в голову, состоит в том, чтобы установить его глобально в хранилище с избыточностью, и тогда всякий раз, когда запускается 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:

Поэтому мне интересно, как я могу установить глобальное избыточное состояние в сервисной функции? Другие решения, решающие проблему, также приветствуются.

Answer 1

Вы можете использовать dispatch напрямую из Redux:

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 пометит его как Hook.