Prevent loss of state when unmounting view

Question

My app uses a react-navigation DrawerNavigator component to allow the user to navigate through various screens within the app.

My react-native-maps MapView component is nested inside a screen accessible via the DrawerNavigator.

The problem I am finding is that if you navigate to another page in the app, and then navigate back to the map page, the whole map has to reload and previous markers/map configuration is lost.

Is there a way that I can prevent the screen from unmounting when navigating away, or another way of stopping the whole map from resetting? I won't post code below because I believe the issue to be more theory based as opposed to fixing a code bug.

Answer 1

You need to persist the state when the component is unmounted. You need a state management library.

I know of two state management libraries.

RxJS is the recommended library for use with Angular. Even though it is not an developed by Angular, it is still installed by default if you use the Angular CLI to bootstrap a project. This library is incredibly powerful, especially with handling asynchronous data flows, and it fits in really well with the angular DI system. My understanding is that you create singleton services to manage particular parts of your global state. You could have many RxJS services for different parts of your app. Your components can then tap into these services and get state information from them. There are libraries which help you integrate RxJS with react components but I cannot attest to their value.

Redux is the canonical way to manage global and persisted state in React. It differs from RxJS in many ways. First, you have only one redux store in your whole app and it contains the entire global state. Second, Redux is modeled on Flux and setting up the various 'players' for the first time can be a very involved process (but once you get it it's easy). I highly recommend making use of the combineReducers function to simplify getting set up. Third, redux does not manage async data straight out of the box, you will need to reach for redux-thunkif you have async data flows.

Redux is still my go-to for global and persisted state in react because of how it integrates. There is a library called react-redux which integrates the two libraries really well. It provides you with a function called connect. The connect function accesses your global state and passes it into your components as a prop.

You wrap your entire app in a store provider line so

export default () => {
    <Provider store={store}>
        <App />
    </Provider>

Then your individual components can access state using connect. connect accepts a function which extracts parts of your state for you. The function could look like this.

const mapStateToProps = state => {
    return {
        stateVariable: state.variable
    }

Now you know your component will receive a prop called stateVariable which is the value of variable in your global store / state. So you can write your component to accept this prop

class Component extends React.Component {
    render() {
        var { stateVariable} = this.props;
        return (
            <View>
                <Text>{stateVariable}</Text>
            </View>
        )
}

Then you call connect on your component with the mapStateToProps function and hey presto

const ConnectedComponent = connect(mapStateToProps)(Component)
export { ConnectedComponent as Component }

You see how this injects the props as if you had written

<Component stateVariable={state.variable} />

In this way it is a solution to prop-drilling

In addition, you can use redux-persist to persist state between sessions, not just mounting/unmounting components. This library accesses localStorage on web or asyncStorage on native.

When you call connect on a component is automatically passes in a prop called dispatch. Dispatch is a function which is used to dispatch actions which make edits to your local store. as I said the system requires some setting up - you must create constants, actions-creators, and reducers to manage these action dispatches. If you watch the first 8 videos of this course you will be well on your way https://egghead.io/courses/getting-started-with-redux

At this moment in time my recommendation is to use Redux with React.