React hook - отправить асин c действие в другом файле - PullRequest
Новая
       21

React hook - отправить асин c действие в другом файле

1 голос
/ 30 апреля 2020

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

// 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 hook, я пробовал следующий способ, но ни один из них не работает: 

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?

1 Ответ

0 голосов
/ 30 апреля 2020

Может быть, вы должны указать dispatch в качестве аргумента: 

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

И затем назвать его так в вашем компоненте: 

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