Правильный шаблон Redux / Saga для нумерации страниц - PullRequest
Новая
       42

Правильный шаблон Redux / Saga для нумерации страниц

0 голосов
/ 10 апреля 2019

У меня есть приложение, которое использует приставку для управления состоянием и саги для асинхронных вызовов, и я пытаюсь выяснить правильную структуру для разбивки на страницы. У меня есть такой редуктор: 

function articles(
    state = {
        isFetching: false,
        didInvalidate: false,
        page: 1,
        items: []
    },
    action
) {
    switch (action.type) {
        case 'INVALIDATE_ARTICLE':
            return Object.assign({}, state, {
                didInvalidate: true,
                page: 1
            })
        case 'REQUEST_ARTICLES':
            return Object.assign({}, state, {
                isFetching: true,
                didInvalidate: false
            })
        case 'RECEIVE_ARTICLES':
            let updatedPage = 'max';
            if (action.response.result.length == 10) {
                updatedPage = state.page + 1
            };
            return Object.assign({}, state, {
                categoryId: action.category,
                isFetching: false,
                didInvalidate: false,
                items: action.response.result,
                lastUpdated: action.receivedAt,
                page: updatedPage
            })
        default:
            return state
    }
}

И сага, которая называет эти связанные действия следующим образом: 

function* fetchArticles(action) {
    const { domain, category, page } = action.payload;
    try {
        yield put(requestArticles(category))
        const response = yield fetch(`${domain}/url?categories=${category}&page=${page}`)
        const stories = yield response.json();
        yield all(stories.map(story => {
            return call(fetchFeaturedImage, `${url][0]}`, story)
        }))
        const normalizedData = normalize(stories, articleListSchema);
        yield put(receiveArticles(category, normalizedData))
    }
    catch (err) {
        console.log('error fetching articles in saga', err)
    }
}

В настоящее время я читаю состояние избыточности из компонентов, вызывающих сагу, и передаю страницу в сагу в качестве полезной нагрузки; но я думаю, что это может запутаться, поскольку мне в конечном итоге придется прочитать состояние, чтобы получить страницу из нескольких различных компонентов, которые хотят вызвать эту сагу, поэтому мне интересно, может ли использование метода sagas select() быть правильным подходом для чтения состояние избыточности и получить страницу непосредственно из саги, чтобы мне не пришлось беспокоиться о ее передаче?

Есть ли мнения о том, как правильно это структурировать?

1 Ответ

0 голосов
/ 10 апреля 2019

Использовать повторно выбрать библиотеку.У вас будет аккуратный селектор, который вы можете просто использовать в нескольких местах.

Попробуйте реализовать структуру на основе container -> component, чтобы вы передавали реквизиты в один контейнер (который является просто компонентом) и передавали остальнымкомпонентов, где вам нужно.

...