title: Redux state resets itself on route change (I think)
body: <p>I am successfully updating my 'global state' with Redux. I change the language index of my app using an action and it changes in the component; however, when I redirect to another component the state seems to reset to the default state value. Help pls... </p>
  
  <blockquote>
    <p>"react": "^16.13.1",
        "react-dom": "^16.13.1",
        "react-redux": "^7.2.0",
        "react-router": "^5.1.2",
        "react-router-dom": "^5.1.2",
        "react-scripts": "3.4.1",
        "redux": "^4.0.5",
        "redux-thunk": "^2.3.0"</p>
  </blockquote>
  
  <p><strong>/redux/state.js</strong></p>
  
  <pre><code>export default {
    language: 0,
    sirens: []
  }
  </code></pre>
  
  <p><strong>/redux/store.js</strong></p>
  
  <pre><code>import { createStore, applyMiddleware } from 'redux'
  import reducers from './reducers'
  import state from './state'
  import thunk from 'redux-thunk';
  
  export default createStore(reducers, state, applyMiddleware(thunk))
  </code></pre>
  
  <p><strong>/redux/actions.js</strong></p>
  
  <pre><code>export const chLang = (index) =&gt; {
    return {
      type: 'CH_LANG',
      value: index
    }
  }
  export const fetchSirens = () =&gt; {
    return  {
      type: 'FETCH_SIRENS',
      value: null
    }
  }
  
  export const addSiren = (siren) =&gt; {
    return {
      type: 'ADD_SIREN',
      value: siren
    }
  }
  
  export const rmSiren = (id) =&gt; {
    return {
      type: 'RM_SIREN',
      value: id
    }
  }
  </code></pre>
  
  <p><strong>/redux/reducers.js</strong></p>
  
  <pre><code>import { combineReducers } from "redux";
  
  // language should only store an index
  const language = (state = null, action) =&gt; {
    switch (action.type) {
      case 'CH_LANG':
        return action.value
      default:
        return state;
    }
  }
  const sirens  = (state = [], action) =&gt; {
    switch (action.type) {
      case 'FETCH_SIRENS':
        return action.value
      case 'ADD_SIREN':
        return [...state, action.value]
      case 'RM_SIREN':
        const sirens = [...state];
        sirens.splice(action.value, 1);
        return sirens;
      default:
        return state;
    }
  }
  
  
  export default(combineReducers({language, sirens}));
  </code></pre>
  
  <p>Initially, I thought I might be accidentally mutating the initial state in my reducers but I don't think that's the case.</p>
  
  <p><strong>/containers/Landing.js</strong>
  All containers follow this general layout:</p>
  
  <pre><code>import { connect } from "react-redux";
  import { chLang } from "../redux/actions";
  import Landing from '../components/Landing';
  
  const mapStateToProps = state =&gt; {
    return {
      language: state.language
    }
  }
  
  const mapDispatchToProps = dispatch =&gt; {
    return {
      chLang: index =&gt; dispatch(chLang(index))
    }
  }
  
  export default connect(mapStateToProps, mapDispatchToProps)(Landing)
  </code></pre>
  
  <p><strong>/components/Landing.js</strong></p>
  
  <pre><code>import React from 'react';
  import languages from '../languages';
  import Button from '@material-ui/core/Button';
  import SimpleDialog from '../containers/SimpleDialog'
  import blob from '../img/blob-white.png';
  import siren1 from '../img/siren-1.png';
  
  
  const Landing = (props) =&gt; {
    const [open, setOpen] = React.useState(false);
    const [selectedValue, setSelectedValue] = React.useState(null);
    const didMountRef = React.useRef(false)
  
  
    const handleClickOpen = () =&gt; {
      setOpen(true);
    };
  
    const handleClose = (value) =&gt; {
      props.chLang(value)
      setOpen(false);
      setSelectedValue(value);
    };
    React.useEffect(() =&gt; {
      if (didMountRef.current) {
        // debugger
        if(props.language !== null){
          // window.location.replace("/hi")
        }
      } else {didMountRef.current = true}
    })
  
    return (
      &lt;div className="landing"&gt;
        &lt;h2 className="sentence"&gt;
          &lt;div className="slidingVertical"&gt;
            {languages.types.map((lan, i) =&gt; &lt;span key={i+1}&gt;{lan.landing[0]}&lt;/span&gt;)}
          &lt;/div&gt;
        &lt;/h2&gt;
        &lt;h1&gt;Siren.&lt;/h1&gt;
        &lt;p&gt;You speak {languages.types[props.language].language}&lt;/p&gt;
        &lt;div className="landing-img"&gt;
          &lt;img id="blob" src={blob} /&gt;
          &lt;img id="siren" src={siren1} /&gt;
        &lt;/div&gt;
        &lt;Button className="landing-bttn" variant="contained" color="primary" onClick={handleClickOpen}&gt;
        &lt;h2 className="sentence sentence-bttn"&gt;
          &lt;div className="slidingVertical"&gt;
            {languages.types.map((lan, i) =&gt; &lt;span className="lang-bttn" key={i+1}&gt;{lan.landing[1]}&lt;/span&gt;)}
          &lt;/div&gt;
        &lt;/h2&gt;
        &lt;/Button&gt;
        &lt;SimpleDialog languages={languages} selectedValue={selectedValue} open={open} onClose={handleClose} /&gt;
      &lt;/div&gt;
    );
  }
  
  export default Landing;
  </code></pre>
  
  <p>The issue comes up when I comment out that <code>window.location.replace("/hi")</code> and the app then loads up the "hi" component. That component should display the text with the language index that the user selected from the previous component; however, the language resets itself to the default value in the store (0).</p>
  
  <p><strong>/components/Hi.js</strong></p>
  
  <pre><code>import React from 'react';
  import languages from '../languages';
  import Button from '@material-ui/core/Button';
  import '../css/hi.css';
  import blob from '../img/blob-2.png';
  import siren from '../img/siren-1.png'
  
  class Hi extends React.Component {
    state = {
      text: languages.types[this.props.language].hi
    }
  
    checkSpecialLang = () =&gt; {
      switch(this.props.language){
        case 3:
          return'zh'
        case 4:
          return 'hi'
        default:
          console.log('Muffin works! I\'m in quarantine and I\'mma cry ;(')
      }
    }
  
    handleAgree = () =&gt; {
      //     window.location.replace("/track");
    }
  
    render() {
      // debugger;
      console.log(this.props.language)
      return (
        &lt;div id={this.checkSpecialLang()} className="hi-container"&gt;
         &lt;h1&gt;{this.state.text[0]}&lt;/h1&gt;
         &lt;img className='siren-img' src={siren} /&gt;
         &lt;div className='intro'&gt;
           &lt;p&gt;{this.state.text[1]}&lt;/p&gt;
           &lt;img src={blob} /&gt;
         &lt;/div&gt;
         &lt;p className="question"&gt;{this.state.text[2]}&lt;/p&gt;
         &lt;Button color='secondary' className="agree-cookies-bttn" variant="contained" onClick={this.handleAgree}&gt;
           &lt;p&gt;{this.state.text[4]}&lt;/p&gt;
         &lt;/Button&gt;
       &lt;/div&gt;
      );
    }
  }
  
  export default Hi;
  </code></pre>
  
  <p>What am I missing here?!</p>