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

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

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)
    }
}

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

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


person Travis James    schedule 10.04.2019    source источник


Ответы (1)


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

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

person humanbean    schedule 10.04.2019