Redux Saga Все эффекты правильного использования - PullRequest
Новая
       7

Redux Saga Все эффекты правильного использования

0 голосов
/ 23 мая 2018

Я начал работать с 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

1 Ответ

0 голосов
/ 23 мая 2018

Поскольку ошибка предполагает, что проблема здесь: 

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

Эффект all ожидает собственный массив javascript в качестве входного параметра, однако вы передаете неизменный список (который является возвращаемым типом staticPagesData.map).

Поскольку эффект all не понимает списков Immutable.js, он обрабатывает его как любой другой объект - то есть он разрешает сам объект, который вы видите в вашем console.log message.

Чтобы исправить это, вы можете, например, преобразовать неизменяемый список в массив javascript следующим образом: 

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