Redux issue

[sm2017]

I have an issue as same as #60 but in both android and iOS (I think the problem is not depends on OS)

My rowRenderer return an element connected to redux and I need to use redux , and I put dataProvider in the mapStateToProps

Can you please provide an example that show how we can use this library with redux?

[sm2017]

I put a log at rowHasChanged of dataProvider

(r1, r2) => {
  console.log('r1, r2',r1, r2,r1 !== r2);
  return r1 !== r2;
}

I understand that always r1 and r2 is repeated to and r1 !== r2 is always false , I change rowHasChanged to (r1, r2) => {return true} just for testing , but not solved

[naqvitalha]

Only keep data in Redux store and create DataProvider inside the component that renders RecyclerListView. When data changes simply create a new one. Don't have it inside the store, that will solve it.
If this doesn't help it would be simpler if you can repro the issue on snack so that I can take a look. Here @Flipkart we already use RecyclerListView with Redux.

[sm2017]

@naqvitalha DataProvider is not in store and is in connect , I tried inside component too , But not working
I will provide simple repro within an hour

[sm2017]

Please clone and run this https://github.com/sm2017/issue-68

In this line https://github.com/sm2017/issue-68/blob/master/src/App.js#L7 , I just put data as initial sate , we never ever change state in this example

https://github.com/sm2017/issue-68/blob/master/src/flights/FlightsPage.js#L90-L98 I add dataProvider to props and if state change new dataProvider is created

As you can see https://github.com/sm2017/issue-68/blob/master/src/flights/FlightData.js#L13 we have only one Green_circle Icon , But if you scroll down , you can see duplicated

[sm2017]

@naqvitalha I see that https://github.com/naqvitalha/travelMate without redux has same issue , Please run https://github.com/naqvitalha/travelMate when you change FlighData with Green_circle Icon

[vvmgev]

with redux
when i use methods of life cycle and in the method I do dispatch
example like this
this.props.setImages([], 0)
i get this error
ExceptionsManager.js:65 TypeError: Cannot read property 'reLayoutFromIndex' of undefined

[vvmgev]

in the example if you use this methods yo can see that error

       componentDidMount() {
        this.setState({
            dataProvider: this.dataProvider.cloneWithRows(this._generateArray(3))
        })
    }

if you use it with setTimeout
its working

    componentDidMount() {
        setTimeout(() => {
            this.setState({
                dataProvider: this.dataProvider.cloneWithRows(this._generateArray(3))
            })
        },2000)
       
    }

[naqvitalha]

@vvmgev Try version 1.2.0-beta.4 ... Should be fine. But know that version is under testing right now.
@sm2017 I'm looking into your issue. Will get back.

[naqvitalha]

@sm2017 I checked the travelMate code, if you look at the bottom I'm using concat to make list longer. This will duplicate object references and cause the issue. I've fixed it can you try and repro now?

[vvmgev]

@naqvitalha ok thanks I will use it
and I have a small question
Now I can set the scroll position when initializing, like scrollTo function

[naqvitalha]

@vvmgev Use initialRenderOffset or initialRenderIndex while mounting. Make sure you don't mount with empty data to fully leverage it.

[vvmgev]

@naqvitalha thanks

[sm2017]

@naqvitalha My problem is solved , I can use Redux without issue

[naqvitalha]

@sm2017 can you let us know your findings so that it may help others with similar issue.

[sm2017]

I have just a mistake , actually this code works well

const mapStateToProps = state => {
  return {
    dataProvider: new DataProvider((r1, r2) => {
      return r1 !== r2
    }).cloneWithRows(state)
  }
}

[naqvitalha]

Great.