React (Native) / Redux - Как я могу загрузить больше предметов, используя приставку?

Question

Я использую избыточность и пытаюсь загрузить больше элементов по клику. Мой создатель действий извлекает все данные, а мое хранилище хранит все данные (я не могу просто запросить 10 элементов, по запросу больше). Мой редуктор возвращает полный список предметов. В моем коде ниже я достигаю этого внутри моего компонента, но как я могу сделать это, используя избыточность (я довольно новичок в этом).

...
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;
    }
}

Answer 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]
  }

Но не знаю точно, что вы делаете, надеюсь, это даст вам представление