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()钩子的react钩子组件，我想使用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');

反应挂钩-在另一个文件中调度异步等待操作

1 个答案: