Two-way coupling (with redux) yields infinite loops

[rreusser]

I need to store the current page in redux. So onChangeTab triggers a redux action to set the state. Redux state in turn must be able to set the page via (the misnomer) initialPage. As it's navigating to the page though, I get more onChangeTab events which trigger redux changes which etc. etc. and now it's totally out of control.

The possibilities are either:

1. This is simple and I'm making it difficult
2. I can make this work with clever flags and switches on my end
3. The API needs an additional feature (scroll end?) or some sort of latch to prevent this
4. This is just a bad idea to begin with and there's a better way to do what I'm trying to do

I can see the argument for all four. Glad to invent a solution, but curious for direction before embarking. Thanks!

[rreusser]

See #128 and #129 for possible relevance. I removed componentWillReceiveProps, but for this situation, scrolling was still triggering extra redux changes.

[skv-headless]

Could you please show me your code just part with react-native-scrollable-tab-view?

[skv-headless]

Please check master version.

[rreusser]

Focused on getting release out the door so this is on the back burner for just a bit, but I'll extract the essence ASAP. Thanks!

[skv-headless]

reopen if it is not fixed in latest version

[chrislegault]

@skv-headless

I've got a follow up with this, could be an issue with what I'm doing. Essentially I'm using the redux dev tools (just playing around with the time travel). Using redux to store the current active tab, and updating my redux state whenever the active tab changes. If I try to replay my state with the dev tools what I see happen is it sets the active tab properly, but it also triggers the onChangeTab callback again which causes an unnecessary update to my state. Here is my view:

import React, { Component } from 'react';
import { View } from 'react-native';
import { connect } from 'react-redux';
import ScrollableTabView from 'react-native-scrollable-tab-view';
import * as types from '../actions/types';

const mapStateToProps = (state) => {
  return {
    currentTab: state.ui.currentTab
  };
};

const mapDispatchToProps = (dispatch) => ({
  setCurrentTab: (i) => {
    dispatch({type: types.CHANGE_TAB, payload: i});
  }
});

class CurrentWorkout extends Component {
  constructor() {
    super();
    this.onChangeTab = this.onChangeTab.bind(this);
  }
  onChangeTab({ i }) {
    this.props.setCurrentTab(i);
  }
  render() {
    return (
      <ScrollableTabView page={this.props.currentTab} onChangeTab={this.onChangeTab} tabBarPosition='bottom'>
        <View tabLabel='tab 1' />
        <View tabLabel='tab 2' />
      </ScrollableTabView>
    );
  }
}

export default connect(mapStateToProps, mapDispatchToProps)(CurrentWorkout);

I can attach a video demonstrating what I'm seeing if I didn't explain it well. I think technically my code is doing exactly what it is supposed to. When I replay the state, that causes a change in the currentTab state which would call the onChangeTab callback, which then sets the state again. So I don't think there is anything I can do.