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

Question

我正在使用redux，我正在尝试在点击时加载更多项目。我的操作创建者获取所有数据，我的商店保存所有数据(我不能只请求 10 个项目，点击请求更多(。我的化简器返回项目的完整列表。在下面的代码中，我在组件中实现了这一目标，但是如何使用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;
}
}

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

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