如何对选定项API调用使用redux-persist

npm install redux-persist

import { createStore } from 'redux';
import { persistStore, persistReducer } from 'redux-persist';
import storage from 'redux-persist/lib/storage';

// 导入你的reducer
import rootReducer from './reducers';

// 定义redux-persist的配置
const persistConfig = {
  key: 'root',
  storage,
};

// 创建一个持久化的reducer
const persistedReducer = persistReducer(persistConfig, rootReducer);

// 创建store
const store = createStore(persistedReducer);
const persistor = persistStore(store);

import React from 'react';
import { Provider } from 'react-redux';
import { PersistGate } from 'redux-persist/integration/react';

import App from './App';

// 渲染应用
ReactDOM.render(
  <Provider store={store}>
    <PersistGate loading={null} persistor={persistor}>
      <App />
    </PersistGate>
  </Provider>,
  document.getElementById('root')
);

import { persistStore, persistReducer } from 'redux-persist';
import { PersistGate } from 'redux-persist/integration/react';

// 定义action
const updateSelectedOption = (option) => {
  return {
    type: 'UPDATE_SELECTED_OPTION',
    payload: option,
  };
};

// 在组件中使用action
const MyComponent = ({ selectedOption, updateSelectedOption }) => {
  const handleOptionChange = (option) => {
    // 调用action更新状态
    updateSelectedOption(option);
  };

  return (
    <div>
      <select value={selectedOption} onChange={(e) => handleOptionChange(e.target.value)}>
        <option value="option1">Option 1</option>
        <option value="option2">Option 2</option>
        <option value="option3">Option 3</option>
      </select>
    </div>
  );
};

// 连接组件到store
const mapStateToProps = (state) => {
  return {
    selectedOption: state.selectedOption,
  };
};

const mapDispatchToProps = (dispatch) => {
  return {
    updateSelectedOption: (option) => dispatch(updateSelectedOption(option)),
  };
};

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