CODEWITHSUNDEEP
react-nativereduxreact-navigation
sabareesh
sabareesh

Reputation: 1

State Management in React Native App

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

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

Upvotes: 0

Views: 403

Answers (1)

jevakallio
jevakallio

Reputation: 35970

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.

Upvotes: 1

Related Questions