Reactjs Bootstrap选项卡在页面重新加载后处于活动状态。或者，当页面重新加载时，如何使用redux on state保存活动选项卡

npm install redux react-redux

import { createStore } from 'redux';

const initialState = {
  activeTab: 0, // 初始活动选项卡的索引
};

function reducer(state = initialState, action) {
  switch (action.type) {
    case 'SET_ACTIVE_TAB':
      return {
        ...state,
        activeTab: action.payload,
      };
    default:
      return state;
  }
}

const store = createStore(reducer);

export default store;

import React from 'react';
import { Provider } from 'react-redux';
import store from './store';

function App() {
  return (
    <Provider store={store}>
      {/* 其他组件 */}
    </Provider>
  );
}

export default App;

import React, { useEffect } from 'react';
import { connect } from 'react-redux';

function Tabs({ activeTab, setActiveTab }) {
  useEffect(() => {
    // 在组件挂载后，根据redux状态设置活动选项卡
    setActiveTab(localStorage.getItem('activeTab') || 0);
  }, [setActiveTab]);

  useEffect(() => {
    // 在活动选项卡发生变化时，将新的值保存到redux状态和localStorage中
    localStorage.setItem('activeTab', activeTab);
    setActiveTab(activeTab);
  }, [activeTab, setActiveTab]);

  // 其他组件渲染逻辑

  return (
    {/* JSX代码 */}
  );
}

const mapStateToProps = (state) => ({
  activeTab: state.activeTab,
});

const mapDispatchToProps = (dispatch) => ({
  setActiveTab: (activeTab) => dispatch({ type: 'SET_ACTIVE_TAB', payload: activeTab }),
});

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