javascript - 将原生 redux 与 flatlist 反应，以在本地进行一些无限滚动

Question

我的 api 没有为我提供页面来获取页面。在这种情况下，我也使用 redux，目前我将结果分成 10 行，并使用 flatlist 仅显示 10 个结果。

我打算用 redux 做的是，在 onEndReached 结束时调用操作函数将 LOAD_MORE 传递给 reducer，并与我当前状态的另外 10 条记录合并，然后再次传回我的组件。

但我不知道我应该怎么做 onEndReached

这是我的组件

 render() {
       if (this.props.loading) {
        return (
            <View style={styles.activityIndicatorContainer}>
            <ActivityIndicator animating={true}/>
            </View>
            );
    } else {
        return (

          <Container style={{flex: 1}}>
          <Content>
          <FlatList
          ref='listRef'
          data={this.props.currData}
          renderItem={this.renderItem}
          keyExtractor={(item, index) => item.sno+item.name+item.cid}
          onEndReached={this.handleMore}
          onEndReachedThreshold={0}
          />
          </Content>
          </Container>

          );
    }
}
handleMore = () => {
    this.props.loadMore();
};
// The function takes data from the app current state,
// and insert/links it into the props of our component.
// This function makes Redux know that this component needs to be passed a piece of the state
function mapStateToProps(state, props) {
    return {
        loading: state.dataReducer.loading,
        data: state.dataReducer.data,
        currData: state.dataReducer.currViewData
    }
}

// Doing this merges our actions into the component’s props,
// while wrapping them in dispatch() so that they immediately dispatch an Action.
// Just by doing this, we will have access to the actions defined in out actions file (action/home.js)
function mapDispatchToProps(dispatch) {
    return bindActionCreators(Actions, dispatch);
}

行动

export function loadMore(){
    return (dispatch) => {
        console.log("load more");
        //dispatch({type: LOAD_MORE, data: test});
    };
}

这是一个简单的测试，看看当我滚动到底部时是否可以在控制台日志中加载更多。好像我无法击中它。可能我怎么能设置这样的东西？

我的结果返回有很多数据，我更喜欢一次加载 10 个并向下滚动另外 10 个，我唯一的问题是我的 api 没有页面来支持通常的无限滚动

标签： javascriptreact-nativeredux