Question

我正在使用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;
    }
}

Answer 1

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

像这样：

_userManager = scope.ServiceProvider.GetService<UserManager<ApplicationUser>>();
    ...
        adminUser.PasswordHash = new PasswordHasher<ApplicationUser>().HashPassword(adminUser, "123qwe");
        _userManager.CreateAsync(adminUser);

在减速器中：

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

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

React（Native）/ Redux-如何使用Redux加载更多项目？

1 个答案: