State Management in React Native App

Question

I am working on a react native app where I am using react-navigation My requirement is I have 4 different screens like a typical Live scores app

screen 1 : List of football matches on the day
screen 2 : Football match page (scorecard, game stats etc)
screen 3 : Team Home (where matches of a particular team, related news feed etc)
screen 4 : League Home (like football worldcup, having matches in that league, news etc)

In this app user can go to any Match Page (screen2) from screen 1 where they can select 3 or screen 4 from where they can go to another match (screen 2), like n number of possibilities.

Now the problem is I am using redux which will have a global store, whenever an user goes to a new page particular content will be loaded in the state and if he selects another page of same route, viz... 2 screen2 routes in the stack both will be pointed to same state fragment, but those two screens are of different matches, I want a architectural suggestion for this scenario mainly related to state management

Screen1 -> Screen2 -> Screen3 -> screen2 -> screen4 ->screen3 -> screen2 ......

If screen stack is something like above how can I manage state. PLease provide your valuable suggestions how I can overcome this complexity

jevakallio jevakallio · Accepted Answer · 2018-02-28T17:30:38

Typically I would decouple the route data from the route information by passing something like an id field as the second (navigationState) parameter:

navigation.navigate("MatchPage", { matchId: matchId });

And when you're mapping state to props, you can use the second parameter "ownProps", which receives the props passed to the underlying component, in this case the navigationState argument provided by react-navigation:

const matchContainer = connect(
  (state, ownProps) => {
    const id = ownProps.navigation.state.params.matchId;
    const match = state.matches[id];
    return {
      match
    };
  }
);

const MatchPageContainer = matchContainer(MatchPage);

In this example, your application state contains an object called matches, keyed by matchId, that you can use to lookup match-specific information. This is a common practice, but your mileage may vary.

State Management in React Native App

1 Answers