用flatlist反应本地redux,以便在本地无限滚动

时间:2018-08-23 12:51:54

标签: javascript react-native redux

我的api不向我提供要通过页面获取的页面。在这种情况下,我也使用redux,目前将结果分成10行,并使用平面列表仅显示10个结果。

我打算对redux进行的操作是,在onEndReached的末尾调用action函数将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没有页面来支持通常的无限滚动

0 个答案:

没有答案