I'm defining a variable in Page1 and would like to access it in Page2 and then when clicking back to Page1 retrieve the same variable

So far, the variable is set on Page1 but cannot be retrieved on Page2

index.js

```
import {createStore, applyMiddleware, combineReducers} from 'redux'
import thunk from 'redux-thunk'
import {composeWithDevTools} from 'redux-devtools-extension'
import {Provider} from 'react-redux'
import variableReducer from './reducers'

const store = createStore(
    variableReducer,
    composeWithDevTools(applyMiddleware(thunk))
)

ReactDOM.render(
    <Provider store={store}>
        <App />
    </Provider>, 
    document.getElementById('root')
)

serviceWorker.unregister();

```

actions/index.js

```
export const SET_MY_VARIABLE = 'SET_MY_VARIABLE'

export const setMyVariable =  myVariable => ({
    type: SET_MY_VARIABLE,
    payload: {myVariable}
})

```

reducers/index.js

```
import {SET_MY_VARIABLE} from '../actions'

const initialState = {
    myVariable: ''
}

const variableReducer = (state=initialState, action) => {
    switch (action.type) {
        case SET_MY_VARIABLE:
            return {
                ...state,
                myVariable: action.payload.myVariable
            }
        default:
            return state
    }
}

export default variableReducer

```

components/Page1.js

```
import React, {useEffect} from 'react'
import {connect, useDispatch} from 'react-redux'
import {setMyVariable} from '../actions'

const Page1 = (props) => {
    const dispatch = useDispatch()

    useEffect(() => {
        dispatch(setMyVariable(5000))
    }, [])

    return (
        <div>
            Setting variable<br />
            <a href="/page2">Go to page 2</a>
        </div>
    )
}

const mapState = state => {

    return {
        myVariable: state.myVariable
    }
}

export default connect(mapState)(Page1)

```

components/Page2.js

```
import React from 'react'
import {connect} from 'react-redux'

const Page2 = (props) => {

    const {myVariable} = props
    console.log('props: ', props)

    return (
        <div>
            Variable: {myVariable}
        </div>
    )
}

const mapState = state => {
    console.log('map2 ', state.myVariable)
    return {
        myVariable: state.myVariable
    }
}

export default connect(mapState)(Page2)

```

I should be able to set variables to the store in one component and access them throughout the entire App. Instead, I'm not able to retrieve them