React hook - отправка асинхронного действия ожидания в другой файл

Question

Например, у меня есть метод с отправкой такого действия, как

// index.js
export default class PageNavigation {
    export async switchPage(pageId) {
      return async (dispatch) => {
          await dispatch(selectPage({ pageId }));
          await dispatch(changeTitle({ pageId }));
          //... more dispatch
    };
    function selectPage(id) {
       return async (dispatch, getState) => {
         //await some complex logic involve some other dispatch
       }
    };
    function changeTitle(id) {
       return async (dispatch, getState) => {
         //await some complex logic involve some other dispatch
       }
    };
}

Теперь у меня есть компонент перехвата реакции, который использует useDispatch() крючок, который я хочу назвать switchPage метод выше с использованием dispatch крючок, я пробовал следующий способ, но ни один из них не работает:

const PageManagement = (props) => {
   const dispatch = useDispatch();
   // Try 1: the 'dispatch' inside switchPage didn't get fired, seems the dispatch here is undefined?
   await switchPage('640');
   // Try 2: Global Unhandled Promise Rejection Error: Actions must be plain objects. 
   // Use custom middleware for async actions.
   dispatch(switchPage('640'));
}

Каким будет правильный способ реализации вышеуказанного сценария? Я знаю, что ниже будет работать, напрямую вызывая действие, используяdispatch но это не то, что я ищу, потому что, когда есть больше действий, кажется, что каждое действие нужно отправлять одно за другим?

await dispatch(selectPage('640'));
await dispatch(changeTitle('640'));
// ... keep calling other dispatch in component?

Answer 1

Может тебе стоит предоставить dispatch в качестве аргумента:

export async switchPage(dispatch, pageId) {
          await dispatch(selectPage({ pageId }));
          await dispatch(changeTitle({ pageId }));
    };

А затем назовите это так в своем компоненте:

const dispatch = useDispatch();
await switchPage(dispatch, '640');