Redux Saga All effects 正确使用

Question

我已经开始使用 Redux-saga，并且一直在学习并行编写 sagas 的高级部分。目前这是我与 all 方法一起使用的功能，我需要这些在分配给 Nav 组件之前过滤和转换一些页面元数据。

    function* CreateNavFromPages(action) {
      const menu = action.payload.menu
      const menuPagesData = toList(menu.get('pages')).map(
        page => {
          const title = page.get('title');
          const uri = page.get('uri');

          return toPageData(title, uri);
        }
      );

      const staticPagesData = menuPagesData.filter(p => p.get('kind') === 'static');
      const pages = yield all(
        staticPagesData.map(page => backend(PagesApi, page.get('id')))
      );

      console.log(pages);
      const staticPagesMetadata = pages
        .filter(({ result, err }) => !err && result.items.length > 0)
        .map(result => fromJS(buildMetadata(fromJs(result.items[0]))));

      const pagesMetadata = menuPagesData.map(page => {
        const key = staticPagesMetadata.findIndex(el => findPage(el, id));
        if (key) {
         return staticPagesMetadata[key].copy({data: page.get('data')});
        }
        return page;
      });

      const nav = Immutable.Map({
        position: 'top',
        target: 'home',
        pagesMetadata
      });

     const {result, err} = yield backend(Navs.create, nav);
     if (err) { ...}
     else {
       yield put(NavActions.createNavSuccessful(result.nav));
      return true;
     }
    }

    function findPage(el, id) {
      return el.get('id') === id;
    }

   backend.js
   export default function* backend(...args) {
     try {
       return { result: yield call(...args)};
     }
     catch (e) {...}
   }

   pages_api.js
   .....
   function get(id) {
     return fetch('/api/pages/${id}');
   }

   export default {get}

当我在我的应用程序上运行时，出现以下错误：

 uncaught at watchMany 
 at takeLatest(CREATE_NAV, createNavFromPages) 
 at createNavFromPages 
 TypeError: pages.filter is not a function

检查 console.log 时，我看到以下内容：

 {size: 2, _origin: 0, _capacity: 2, _level: 5, _root: null, _tail: {Array(2){Generator, Generator}}}

我在这里遗漏了什么吗？ 已更新：添加了 PagesApi 定义

Answer 1

如错误提示问题出在这里：

const pages = yield all(
  staticPagesData.map(page => backend(PagesApi, page.get('id')))
);

all 效果需要一个原生 javascript 数组作为输入参数，但是您传递的是不可变列表（这是 staticPagesData.map 的 return 类型）。

由于 all 效果不理解 Immutable.js 列表，因此将其视为任何其他对象 - 即它解析为对象本身，这就是您在 [=15] 中看到的=] 消息.

要修复它，您可以例如将不可变列表转换为 javascript 数组，如下所示：

const pages = yield all(
  staticPagesData.map(page => backend(PagesApi, page.get('id'))).toJS()
);

Redux Saga All effects 正确使用

Redux Saga All effects proper usage

reactjs

redux

redux-saga