Как превратить действие Thunk в сагу - PullRequest
Новая
       26

Как превратить действие Thunk в сагу

0 голосов
/ 23 декабря 2019

Я очень новичок в redux-saga и пытаюсь получить простую демонстрационную работу, которая выполняет вызов API и выполняет разбиение на страницы. Насколько я понимаю, поток редукс-саги должен работать следующим образом. Размер страницы используется для ограничения количества данных, отображаемых при вызове API. 

 const PAGE_SIZE = 1;

    export const fetchItems = page => (dispatch, getState) => {
      const state = getState();
      const offset = page * PAGE_SIZE;
      dispatch(setItemsCurrentPage(page));
      if (getIsPageFetched(state, page)) {
        return;
      }
      dispatch(fetchItemsRequest());
      fromItems.fetchItems({
        limit: PAGE_SIZE,
        offset,
      })
        .then((response) => {
          const pageCount = Math.ceil(response.count / PAGE_SIZE);
          dispatch(fetchItemsResponse({
            items: response.results,
            page,
            pageCount,
          }));
        })
    };

Ответы [ 2 ]

0 голосов
/ 26 декабря 2019

Эквивалентный код в Redx Saga будет выглядеть примерно так: 

export function* watchFetch() {
  yield takeEvery('FETCH_ITEMS', fetchItems);
}

export function* fetchItems(action) {
  const offset = action.page * PAGE_SIZE;
  yield put(setItemsCurrentPage(page));
  if (yield select(getIsPageFetched, page)) {
    return;
  }
  yield put(fetchItemsRequest());
  const response = yield fromItems.fetchItems({
    limit: PAGE_SIZE,
    offset,
  });
  const pageCount = Math.ceil(response.count / PAGE_SIZE);
  yield put(fetchItemsResponse({
    items: response.results,
    page,
    pageCount,
  }));
}
0 голосов
/ 23 декабря 2019

selector.js 

/**
 * Direct selector to the container state domain
 */
const selectState = () => state =>
  state.get("selectState");

export {
  selectState
 };

saga.js

     import { call, put, select } from "redux-saga/effects";
        import {selectState} from "./selector";    
           export function* fetchItems(page) {
              try {
              const state= yeild select(selectState())
              const offset=page * PAGE_SIZE;
              yield put(setItemsCurrentPage(page));
              /**for api calls you need use **call** method**/
              const data={limit:PAGE_SIZE,offset};
              const requestUrl = `${url}`;
              const options = {
              method: "POST",
              headers: {
                "Content-Type": "application/json"
              },
              body: JSON.stringify(data)
            };
            const response = yield call(request, requestUrl, options);
            const pageCount = Math.ceil(response.count / PAGE_SIZE);
            yield put(fetchItemResponse({items:response.results,page,pageCount}))

              } catch (e) {
                yield put(LoadingError(e));
              }
            }

* Селекторы заметок в основном используются для получения данных из состояния, в thunk мы используем getState () и переходим к данным, но вСага, вам нужны селекторы для доступа к определенным данным состояния. Put используется для установки данных для хранения (в основном, действие), call используется для api hit. Просмотрите некоторые сообщения, видео на YouTubeили официальные документы для ясности, но, на мой взгляд, тук легче понять.

...