React+Redux应用中如何保存Toggle状态，刷新页面不丢失？

嘿，针对你在React+Redux项目里需要保留Toggle组件状态的需求，我整理了几种除了组件自身this.state之外的可行方案，每种都有具体的实现思路和代码示例：

1. 利用Redux全局状态管理（最契合你的技术栈） #

因为你的项目已经在用Redux，把Toggle的状态放到全局store里是最顺的方案，结合持久化工具后，刷新页面状态也能自动恢复。

具体步骤：

• 在Redux的reducer里添加管理同步状态的字段，比如sync.toggled
• 定义对应的action（比如TOGGLE_SYNC_STATUS）来更新这个状态
• 组件通过connect（类组件）或者useSelector（函数组件）获取全局状态，替代原来的组件state
• 在handleToggle里dispatch这个action，同时执行日历同步/取消的逻辑
• 用redux-persist实现Redux状态持久化，它会自动把store数据存在localStorage，刷新时自动读取恢复

示例代码（类组件版本）：

// 组件部分
import { connect } from 'react-redux';

class YourComponent extends React.Component {
  constructor(props){
    super(props);
    this.state ={ value: 1 };
    this.handleToggle = this.handleToggle.bind(this);
  }

  handleToggle = (event, toggled, index) => {
    // 触发Redux action更新全局状态
    this.props.setSyncStatus(toggled);
    if (toggled) {
      // 同步日历逻辑
    } else {
      // 取消同步逻辑
    }
  }

  render() {
    return (
      <Toggle 
        label={translate('sync')} 
        onToggle={this.handleToggle} 
        toggled={this.props.syncToggled} 
      />
    );
  }
}

// 映射Redux状态到组件props
const mapStateToProps = state => ({
  syncToggled: state.sync.toggled
});

// 映射dispatch方法到组件props
const mapDispatchToProps = dispatch => ({
  setSyncStatus: (status) => dispatch({ 
    type: 'TOGGLE_SYNC_STATUS', 
    payload: status 
  })
});

export default connect(mapStateToProps, mapDispatchToProps)(YourComponent);

2. 直接使用LocalStorage/SessionStorage #

如果不想把状态放到Redux全局store，直接用浏览器的本地存储是最简单的方案，不需要额外依赖。

实现思路：

• 组件初始化时，从localStorage读取之前保存的状态，作为Toggle的初始值
• 每次切换Toggle时，更新组件状态的同时，把新状态存入localStorage

示例代码：

constructor(props){
  super(props);
  // 从localStorage读取，默认false（如果之前没存过）
  const savedStatus = localStorage.getItem('syncToggled') === 'true';
  this.state ={
    value: 1,
    toggled: savedStatus
  };
  this.handleToggle = this.handleToggle.bind(this);
}

handleToggle = (event, toggled, index) => {
  this.setState({ toggled });
  // 把状态存入localStorage
  localStorage.setItem('syncToggled', toggled.toString());
  
  if (toggled) {
    // 同步日历逻辑
  } else {
    // 取消同步逻辑
  }
}

小提示：如果只需要在当前会话（浏览器标签打开期间）保留状态，可以用sessionStorage替代localStorage，会话结束后状态会自动清除。

3. 使用Cookie存储 #

如果需要状态跨域名保留，或者要设置过期时间，可以用Cookie来存储。可以自己写Cookie操作方法，也可以用js-cookie这类简化库。

示例（用js-cookie）：

// 先安装依赖：npm install js-cookie --save
import Cookies from 'js-cookie';

constructor(props){
  super(props);
  const savedStatus = Cookies.get('syncToggled') === 'true';
  this.state ={
    value: 1,
    toggled: savedStatus
  };
  this.handleToggle = this.handleToggle.bind(this);
}

handleToggle = (event, toggled, index) => {
  this.setState({ toggled });
  // 设置Cookie，比如7天后过期
  Cookies.set('syncToggled', toggled.toString(), { expires: 7 });
  
  if (toggled) {
    // 同步日历逻辑
  } else {
    // 取消同步逻辑
  }
}

4. URL查询参数（适合需要分享状态的场景） #

如果希望用户分享链接时，Toggle的状态也能被同步，可以把状态放到URL的查询参数里，比如?sync=true。这样用户打开链接时，Toggle会自动处于对应的状态。

示例（结合react-router）：

import { withRouter } from 'react-router-dom';

class YourComponent extends React.Component {
  constructor(props){
    super(props);
    // 从URL参数读取状态
    const searchParams = new URLSearchParams(this.props.location.search);
    const savedStatus = searchParams.get('sync') === 'true';
    this.state ={
      value: 1,
      toggled: savedStatus
    };
    this.handleToggle = this.handleToggle.bind(this);
  }

  handleToggle = (event, toggled, index) => {
    this.setState({ toggled });
    // 更新URL参数
    const searchParams = new URLSearchParams(this.props.location.search);
    searchParams.set('sync', toggled.toString());
    this.props.history.push({
      search: searchParams.toString()
    });
    
    if (toggled) {
      // 同步日历逻辑
    } else {
      // 取消同步逻辑
    }
  }

  render() {
    return (
      <Toggle 
        label={translate('sync')} 
        onToggle={this.handleToggle} 
        toggled={this.state.toggled} 
      />
    );
  }
}

// 用withRouter包裹组件，获取location和history对象
export default withRouter(YourComponent);

内容的提问来源于stack exchange，提问作者Anas