Redux 状态在路由更改时自行重置（我认为）

Question

我正在使用 Redux 成功更新我的“全局状态”。我使用一个动作更改了我的应用程序的语言索引，它在组件中发生了变化；但是，当我重定向到另一个组件时，状态似乎重置为默认状态值。请帮助...

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

/redux/state.js

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

/redux/store.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))

/redux/actions.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/reducers.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)

/components/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;

我在这里错过了什么？！

Answer 1

那是因为location.replace("/hi")重新加载整个窗口并且 redux 存储也会重置。要重定向用户并保持 redux 状态不变，您应该在组件之间路由。我的意思是您必须在不重新加载整个页面的情况下更改路线。我建议你使用 react routing module。

您可以使用react-router-dom的Redirect组件在不重新加载页面的情况下重定向用户。

在此处查看文档

Answer 2

对于任何其他遇到此问题的人。使用<Link>标签而不是标记<a>。a 标签将完全重新加载页面并删除当前状态。链接标签允许您在整个应用程序中保留数据，但仍然允许您在应用程序的页面之间移动。