Question

我已经开始使用Redux-saga并且我一直在关注并行编写传单的高级部分。目前这是我使用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的返回类型）。

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

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

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

Redux Saga所有效果正确使用

1 个答案: