React (Native) / Redux - 如何使用 redux 加载更多项目？答案

【问题标题】：React (Native) / Redux - How can I load more items using redux?React (Native) / Redux - 如何使用 redux 加载更多项目？
【发布时间】：2018-12-09 15:44:58
【问题描述】：

我正在使用 redux，我正在尝试加载更多项目 onclick。我的动作创建者获取所有数据，我的商店保存所有数据（我不能只请求 10 个项目，onclick 请求更多）。我的减速器返回一个完整的项目列表。在下面的代码中，我在我的组件中实现了这一点，但是我怎么能使用 redux 来做到这一点（我对它相当陌生）。

...
import {fetchData} from "../...";

class DataContainer extends React.Component {

    state = {
        data: [],
        page: 0,
        posts: []
    }
    componentDidMount() {
        this.props.fetchData().then(() => {
            this.setState({data: this.props.data}, () => {
                this.addRecords(0);
            })
        })
    }
    addRecords = (page) => {
        const newPosts = []
        for (var i = page * 10, il = i + 10; i < il && i <
        this.state.data.length; i++) {
            newPosts.push(this.state.data[i]);
        }
        this.setState({
            posts: [...this.state.posts, ...newPosts]
        });
    }
    renderItem = ({item}) => (
        <Item
            id={item.id}
            itemData={item}
        />
    );
    renderLoadMoreButton = () => {
        return <Button
            title="Load more"
            onPress={this.loadMore}
        />
    }

    loadMore = () => {
        this.setState({
            page: this.state.page + 1
        }, () => this.addRecords(this.state.page))

    }
    render() {
        return (
            <View>

                <FlatList
                    data={this.state.posts}
                    keyExtractor={(item, index) => item.id}
                    renderItem={this.renderItem}
                    ListFooterComponent={this.renderLoadMoreButton}
                    onEndThreshold={0}
                />
            </View>
        );
    }
}

mapStateToProps = state => {
    return {
        data: state.data

    }
}

export default connect(mapStateToProps, {fetchData})(DataContainer)

我想像这样在我的动作创建器中消除页码：

export const loadMoreData = (page) => {
return dispatch => {
    dispatch({type: LOAD_MORE_DATA, payload: page
}

但是在我的减速器中，我不知道该怎么做：

export default (state = initialState, action) => {
    switch (action.type) {

        case  FETCH_DATA_SUCESS:
            return {
                ...state,
                data: [...state.data, ...action.payload]
            }

        case LOAD_MORE_DATA:
            const newPosts = []

            for(var i = action.payload * 10, il = i + 10; i < il && i <
            [...state.data]; i++){
                newPosts.push([...state.data][i]);
            }

            return {
                ...state
            }
        default:
            return state;
    }
}

【问题讨论】：

标签： reactjs react-native redux

【解决方案1】：

我建议将逻辑放在动作中（我的意思是迭代器）

像这样：

export const loadMoreData = (page) => {
  return (dispatch, getState) => {
    const newPosts = []
    const currentData = getState().data

    for(var i = page * 10, il = i + 10; i < il && i < currentData.length; i++){
      newPosts.push([...state.data][i]);
    }

    dispatch({type: LOAD_MORE_DATA, payload: page})
  }
}

在你的减速器中：

case LOAD_MORE_DATA:
  return {
      ...state, 
      data: [...state.data, ...action.payload]
  }

但不知道你在做什么，希望它能给你一个想法

【讨论】：