Question

我有一个应用程序，它使用redux进行状态管理，并使用sagas进行异步调用，并且我试图找出用于分页的正确结构。我有这样的减速器：

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

目前，我正在从调用saga的组件读取redux状态，并将页面作为有效负载传递给saga。但是我认为这可能会变得混乱，因为我最终将不得不读取状态以从要调用此传奇的多个不同组件中获取页面，因此我想知道使用sagas select()方法是否是正确的方法读取redux状态并直接从传奇中获取页面，所以我不必担心传递它吗？

是否有关于如何正确构造此结构的意见？

Answer 1

使用reselect库。您将拥有一个简洁的选择器，可以在多个地方使用。

尝试实现基于container -> component的结构，以便将道具传递到一个容器（只是一个组件），并在任何需要的地方传递到其余的组件。

正确的分页Redux / Saga模式

1 个答案: