Redux for maintaing data with React Stack Navigation stackwise

问题

I have a screen A , which contains navigable components. One of these components navigates to screen A itself but with different data passed from the triggered component.

I am using Redux , and React-navigation.

Please help me to know how can I store data of screen according to React Stack Navigation Stage.

Stack 4 --> Product Screen[id=103]
Stack 3 --> Product Screen[id=102]
Stack 2 --> Product Screen[id=101](suppose it contains related products which navigates to Product Screen itself with different params via this.props.navigation state params)
Stack 1 --> Home

Now currently my screen shows data like this from the store:

class ProductDetail extends Component {
  componentWillMount() {
        debugger;
        this.props.getProduct(this.props.navigation.state.params.productId);
    }

render() {
        const { goBack } = this.props.navigation;
        const { navigate } = this.props.navigation;
  return (
    <View>
     {
        this.props.product.isProductLoadingCompleted && (
          <Text>{productDetail.name}</Text>
          <View>
            //displaying all related products [onPress of this component ProductDetail Component opens with different id]
          </View>
     }    
    </View>
  }
}

Now suppose I am calling

this.props.navigation.goBack();

from Stack 4 , then it will show data of product id = 103 instead of product id = 102. To solve this this, either I have to put condition to fetch data again with the current screen product id which I do not think is a good application.

So how can I store the data so that product id 103 sticks to Screen at Stack 4 and product id 102 at stack 3 and so on ?

来源：https://stackoverflow.com/questions/45912318/redux-for-maintaing-data-with-react-stack-navigation-stackwise

标签

react-native

redux

react-redux

react-navigation