我用Redux成功地更新了我的“全局状态”。我用一个操作改变了我的应用程序的语言索引，它在组件中改变了;但是，当我重定向到另一个组件时，状态似乎重置为默认状态值。帮助请...
“React”：“^16.13.1”，“React域”：“^16.13.1”，“还原React”：“^7.2.0”，“React路由器”：“^5.1.2”，“React路由器域”：“^5.1.2”，“React脚本”：“3.4.1”、“redux”：“^4.0.5”，“还原形形式转换”：“^2.3.0”

/还原文件/状态.js

export default {
  language: 0,
  sirens: []
}

/还原文件/存储.js

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))

/还原文件/操作.js

export const chLang = (index) => {
  return {
    type: 'CH_LANG',
    value: index
  }
}
export const fetchSirens = () => {
  return  {
    type: 'FETCH_SIRENS',
    value: null
  }
}

export const addSiren = (siren) => {
  return {
    type: 'ADD_SIREN',
    value: siren
  }
}

export const rmSiren = (id) => {
  return {
    type: 'RM_SIREN',
    value: id
  }
}

/redux/还原器.js

import { combineReducers } from "redux";

// language should only store an index
const language = (state = null, action) => {
  switch (action.type) {
    case 'CH_LANG':
      return action.value
    default:
      return state;
  }
}
const sirens  = (state = [], action) => {
  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}));

最初，我以为我可能是不小心在我的还原器中突变了初始状态，但我不认为是这样。

/containers/Landing.js所有容器都遵循以下总体布局：

import { connect } from "react-redux";
import { chLang } from "../redux/actions";
import Landing from '../components/Landing';

const mapStateToProps = state => {
  return {
    language: state.language
  }
}

const mapDispatchToProps = dispatch => {
  return {
    chLang: index => dispatch(chLang(index))
  }
}

export default connect(mapStateToProps, mapDispatchToProps)(Landing)

/组件/登陆.js

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) => {
  const [open, setOpen] = React.useState(false);
  const [selectedValue, setSelectedValue] = React.useState(null);
  const didMountRef = React.useRef(false)

  const handleClickOpen = () => {
    setOpen(true);
  };

  const handleClose = (value) => {
    props.chLang(value)
    setOpen(false);
    setSelectedValue(value);
  };
  React.useEffect(() => {
    if (didMountRef.current) {
      // debugger
      if(props.language !== null){
        // window.location.replace("/hi")
      }
    } else {didMountRef.current = true}
  })

  return (
    <div className="landing">
      <h2 className="sentence">
        <div className="slidingVertical">
          {languages.types.map((lan, i) => <span key={i+1}>{lan.landing[0]}</span>)}
        </div>
      </h2>
      <h1>Siren.</h1>
      <p>You speak {languages.types[props.language].language}</p>
      <div className="landing-img">
        <img id="blob" src={blob} />
        <img id="siren" src={siren1} />
      </div>
      <Button className="landing-bttn" variant="contained" color="primary" onClick={handleClickOpen}>
      <h2 className="sentence sentence-bttn">
        <div className="slidingVertical">
          {languages.types.map((lan, i) => <span className="lang-bttn" key={i+1}>{lan.landing[1]}</span>)}
        </div>
      </h2>
      </Button>
      <SimpleDialog languages={languages} selectedValue={selectedValue} open={open} onClose={handleClose} />
    </div>
  );
}

export default Landing;

当我注解掉那个window.location.replace("/hi")，然后应用程序加载“hi”组件时，这个问题就出现了。但是，该语言会将其自身重置为存储区中的默认值（0）。

/组件/Hi.js

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 = () => {
    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 = () => {
    //     window.location.replace("/track");
  }

  render() {
    // debugger;
    console.log(this.props.language)
    return (
      <div id={this.checkSpecialLang()} className="hi-container">
       <h1>{this.state.text[0]}</h1>
       <img className='siren-img' src={siren} />
       <div className='intro'>
         <p>{this.state.text[1]}</p>
         <img src={blob} />
       </div>
       <p className="question">{this.state.text[2]}</p>
       <Button color='secondary' className="agree-cookies-bttn" variant="contained" onClick={this.handleAgree}>
         <p>{this.state.text[4]}</p>
       </Button>
     </div>
    );
  }
}

export default Hi;

我错过了什么？！