如何在 Flatlist 上使用无限滚动的 redux saga？答案

【问题标题】：How to use redux saga with infinite scroll on Flatlist?如何在 Flatlist 上使用无限滚动的 redux saga？
【发布时间】：2018-02-26 20:39:19
【问题描述】：

我正在开发我的第一个 React Native 应用程序，这是我第一次使用 redux 和 redux saga。因此，我构建了一个 Flatlist 以使用 API 端点无限滚动并返回帖子（每页 10 个）。但是我不知道如何使用redux saga使用reducers返回帖子，控制加载指示器并跟踪商店中的页码。

我的代码如下：

Home.js

this.state = {
    page: 1,
    totalPages: 10,
    loading: false,
}

componentDidMount() {
    this.loadMorePosts();
}

loadMorePosts = () => {
    this.setState(() => { loading: true });
    this.setState(() => { page: this.state.page++ });
    this.props.loadPosts(this.state.page);
}

<AnimatedFlatList
    ...
    onEndReached={this.loadMorePosts}
    onEndReachedThreshold={0.2}
/>

const mapStateToProps = state => ({
    posts: state.posts,
});

帖子操作

export function loadPosts(page){
    return {
        type: Types.FETCH_POSTS,
        payload: { page }
    };
}

帖子传奇

export function* fetchPosts(action) {
    const response = yield call(api.get, `/posts/${action.payload.page}`);
    yield put({ type: Types.LOAD_POSTS, payload: { posts: response.data } });
}

帖子缩减器

export default function posts(state = initialState, action) {
    switch(action.type) {
        case Types.LOAD_POSTS:
            return [ ...state, ...action.payload.posts ];
        default:
            return state;
    }
}

有了这个，我可以获取帖子并加载到 Flatlist 中，但是如果我改变屏幕，我会忘记实际的页码，在 Home.js 构造函数中将再次设置为 0。并且没有视觉反馈，因为加载状态不是用 mapStateToProps 函数定义的......

谁能帮我解决这个问题？

【问题讨论】：

我建议在 redux reducer 状态下也有页码和加载指示器。
您的意思是创建新的独立reducer，在saga 获取帖子后监听相同的事件？
添加了答案

标签： javascript react-native redux redux-saga react-native-flatlist

【解决方案1】：

扩展评论：（未经测试的代码，但有原则）。

传奇

export function* fetchPosts(action) {
    try {
        yield put({ type: Types.LOAD_POSTS_START, payload: { page: action.payload.page } });
        const response = yield call(api.get, `/posts/${action.payload.page}`);
        yield put({ type: Types.LOAD_POSTS, payload: { posts: response.data } });
    }
    catch {
        //perhaps roll back page count?
        yield put({ type: Types.LOAD_POSTS_END, payload: { } });
    }
}

减速器

const initialState = {
   isLoading: false,
   currentPage: 0,
   posts: []
}
export default function posts(state = initialState, action) {
    switch(action.type) {
        case Types.LOAD_POSTS_START: 
            return {
                ...state, 
                currentPage: action.payload.page,
                isLoading: true
            };
        case Types.LOAD_POSTS_END: 
            return {
                ...state, 
                isLoading: false
            };
        case Types.LOAD_POSTS:
            return {
              ...state, 
              isLoading: false,
              posts: [ ...state.posts, ...action.payload.posts ]
            };
        default:
            return state;
    }
}

然后在您的组件中连接到此状态，而不是将其存储在组件状态对象中

【讨论】：

如何清空帖子？

【解决方案2】：

创建一个只执行fetch 并返回如下承诺的传奇/任务：

const fetchAction = (input, init) => {
  let resolve;
  const promise = new Promise(resolveArg => resolve = resolveArg)
  return { type:'FETCH_ACTION', input, init, promise, resolve }
}

function fetchActionWorker({ input, init, resolve}) {
   const res = yield call(fetch, input, init);
   resolve(res);
}

function* fetchActionWatcher() {
   yield takeEvery('FETCH_ACTION', fetchWorker);
}

然后像这样使用它：

class List extends Component {
    render() {
       return <Button title="fetch" onPress={this.doFetch} />
    }
    doFetch = async () => {
        const res = await dispatch(fetchAction('url', { method:'GET' })).promise;
    }
}

调用fetch 操作会立即给您一个承诺。

【讨论】：