{"action":"created","issue":{"url":"https://api.github.com/repos/RealScout/redux-infinite-scroll/issues/31","repository_url":"https://api.github.com/repos/RealScout/redux-infinite-scroll","labels_url":"https://api.github.com/repos/RealScout/redux-infinite-scroll/issues/31/labels{/name}","comments_url":"https://api.github.com/repos/RealScout/redux-infinite-scroll/issues/31/comments","events_url":"https://api.github.com/repos/RealScout/redux-infinite-scroll/issues/31/events","html_url":"https://github.com/RealScout/redux-infinite-scroll/issues/31","id":193957985,"number":31,"title":"New Data replacing current data instead of extend it and LoadMore function only run once","user":{"login":"ssuhat","id":10653041,"avatar_url":"https://avatars.githubusercontent.com/u/10653041?v=3","gravatar_id":"","url":"https://api.github.com/users/ssuhat","html_url":"https://github.com/ssuhat","followers_url":"https://api.github.com/users/ssuhat/followers","following_url":"https://api.github.com/users/ssuhat/following{/other_user}","gists_url":"https://api.github.com/users/ssuhat/gists{/gist_id}","starred_url":"https://api.github.com/users/ssuhat/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/ssuhat/subscriptions","organizations_url":"https://api.github.com/users/ssuhat/orgs","repos_url":"https://api.github.com/users/ssuhat/repos","events_url":"https://api.github.com/users/ssuhat/events{/privacy}","received_events_url":"https://api.github.com/users/ssuhat/received_events","type":"User","site_admin":false},"labels":[{"id":314700336,"url":"https://api.github.com/repos/RealScout/redux-infinite-scroll/labels/question","name":"question","color":"cc317c","default":true}],"state":"open","locked":false,"assignee":null,"assignees":[],"milestone":null,"comments":4,"created_at":"2016-12-07T04:53:51Z","updated_at":"2016-12-07T06:07:35Z","closed_at":null,"body":"Container:\r\n\r\n    import React, { Component } from 'react';\r\n    import { connect } from 'react-redux';\r\n    import { actions, getBrands } from '../reducer';\r\n    import Infinite from 'react-infinite';\r\n    import InfiniteScroll from 'redux-infinite-scroll';\r\n    import SearchBox from '../components/SearchBox';\r\n    import CardList from '../components/CardList';\r\n\r\n    const { fetchBrands } = actions;\r\n\r\n    class BrandList extends Component {\r\n\r\n        componentDidMount() {\r\n            this.props.fetchBrands({ page: 1 });\r\n        }\r\n\r\n        renderList() {\r\n            const brands = this.props.brands;\r\n            return brands.map((brand) => {\r\n                return (\r\n                    <CardList key={brand.id} name={brand.name} avatar={brand.avatar.thumbnail} follower={brand.follows_count} />\r\n                );\r\n            });\r\n\r\n        }\r\n\r\n        toggle() {\r\n            return this.props.isFetching;\r\n        }\r\n\r\n        loadMore() {\r\n            const {lastPage, currentPage} = this.props;\r\n            const nextPage = currentPage ? parseInt(currentPage) + 1 : 1;\r\n            if(currentPage && currentPage <= lastPage){\r\n                this.props.fetchBrands({page: nextPage});\r\n            }\r\n        }\r\n\r\n        render() {\r\n            return (\r\n                <div>\r\n                    <SearchBox />\r\n\r\n                    <div className=\"row\">\r\n                        <InfiniteScroll\r\n                            items={this.renderList()}\r\n                            loadMore={this.loadMore.bind(this)}\r\n                            />\r\n                    </div>\r\n                </div>\r\n            );\r\n        }\r\n    }\r\n\r\n    function mapStateToProps(state) {\r\n        return {\r\n            brands: getBrands(state),\r\n            isFetching: state.brand.isFetching,\r\n            currentPage: state.brand.currentPage,\r\n            lastPage: state.brand.lastPage\r\n        };\r\n    }\r\n\r\n    export default connect(mapStateToProps, { fetchBrands })(BrandList);\r\n\r\nReducer:\r\n\r\nimport axios from 'axios';\r\n\r\n    // Define Types\r\n    export const types = {\r\n        // brand list\r\n        FETCH_BRANDS: 'fetch_brands',\r\n        FETCH_BRANDS_SUCCESS: 'fetch_brands_success',\r\n        FETCH_BRANDS_ERROR: 'fetch_brands_failure',\r\n        FETCH_BRAND: 'fetch_brand',\r\n        FETCH_BRAND_SUCCESS: 'fetch_brand_success',\r\n        FETCH_BRAND_ERROR: 'fetch_brand_failure',\r\n    };\r\n\r\n    const { FETCH_BRANDS, FETCH_BRANDS_SUCCESS, FETCH_BRANDS_ERROR } = types;\r\n\r\n    // Define Reducer\r\n    export const INITIAL_STATE = { brands: [], brand: {}, isFetching: false, error: null, currentPage: 1 };\r\n\r\n    export default function (state = INITIAL_STATE, action) {\r\n        switch (action.type) {\r\n            case FETCH_BRANDS:\r\n                return { ...state, isFetching: true };\r\n            case FETCH_BRANDS_SUCCESS:\r\n                return { ...state, brands: action.payload.brands.data, currentPage: action.payload.brands.current_page, lastPage: action.payload.brands.last_page };\r\n            case FETCH_BRANDS_ERROR:\r\n                return { ...state, error: action.payload };\r\n            default:\r\n                return state;\r\n        }\r\n    }\r\n\r\n    // Define Actions\r\n    export const actions = {\r\n        fetchBrands: ({page, count = 15}) => {\r\n            return (dispatch) => {\r\n                dispatch({ type: FETCH_BRANDS });\r\n                axios.get(`brands?page=${page}&count=${count}`)\r\n                    .then((response) => {\r\n                        const {data} = response;\r\n                        if (data.code == 200) {\r\n                            dispatch({ type: FETCH_BRANDS_SUCCESS, payload: data });\r\n                        }\r\n                    });\r\n            };\r\n        }\r\n    };\r\n\r\n    // SELECTOR\r\n    export const getBrands = (state) => state.brand.brands;\r\n\r\n1. I inspect element it run next api (page 2) but it not extend current list, it replace it instead.\r\n\r\n2. `loadmore` function only run once. it should run 10 times.\r\n\r\nAny solution to make it scroll? Or do I miss something on my code?"},"comment":{"url":"https://api.github.com/repos/RealScout/redux-infinite-scroll/issues/comments/265364239","html_url":"https://github.com/RealScout/redux-infinite-scroll/issues/31#issuecomment-265364239","issue_url":"https://api.github.com/repos/RealScout/redux-infinite-scroll/issues/31","id":265364239,"user":{"login":"ssuhat","id":10653041,"avatar_url":"https://avatars.githubusercontent.com/u/10653041?v=3","gravatar_id":"","url":"https://api.github.com/users/ssuhat","html_url":"https://github.com/ssuhat","followers_url":"https://api.github.com/users/ssuhat/followers","following_url":"https://api.github.com/users/ssuhat/following{/other_user}","gists_url":"https://api.github.com/users/ssuhat/gists{/gist_id}","starred_url":"https://api.github.com/users/ssuhat/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/ssuhat/subscriptions","organizations_url":"https://api.github.com/users/ssuhat/orgs","repos_url":"https://api.github.com/users/ssuhat/repos","events_url":"https://api.github.com/users/ssuhat/events{/privacy}","received_events_url":"https://api.github.com/users/ssuhat/received_events","type":"User","site_admin":false},"created_at":"2016-12-07T06:07:34Z","updated_at":"2016-12-07T06:07:34Z","body":"@dcurletti I've update my code using`elementIsScrollable={false}`  is still the same"}}
{"actor":{"display_login":"ssuhat"}}