React 中使用 Redux 实现本地存储（类似 Pinia）

在 React 中使用 Redux 实现类似于 Pinia 的本地存储功能，可以使用 redux-persist 库来实现。下面是一个示例代码：

首先，安装必要的依赖：

npm install redux redux-persist react-redux

接下来，创建一个 Redux store，并配置 redux-persist：

// store.js
import { createStore } from 'redux';
import { persistStore, persistReducer } from 'redux-persist';
import storage from 'redux-persist/lib/storage'; // 默认使用 localStorage 作为存储引擎

// 定义初始状态
const initialState = {
  // 初始状态
};

// 定义 reducer
const reducer = (state = initialState, action) => {
  // 处理 action 并更新状态
};

// 配置 persist
const persistConfig = {
  key: 'root', // 存储键名
  storage, // 存储引擎
};

const persistedReducer = persistReducer(persistConfig, reducer);

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

export { store, persistor };

然后，在 React 组件中使用 Redux store：

// App.js
import React from 'react';
import { Provider } from 'react-redux';
import { PersistGate } from 'redux-persist/integration/react';
import { store, persistor } from './store';

import MyComponent from './MyComponent';

const App = () => {
  return (
    <Provider store={store}>
      <PersistGate loading={null} persistor={persistor}>
        <MyComponent />
      </PersistGate>
    </Provider>
  );
};

export default App;

最后，在组件中使用 Redux 的状态和操作：

// MyComponent.js
import React from 'react';
import { useSelector, useDispatch } from 'react-redux';

const MyComponent = () => {
  const count = useSelector(state => state.count);
  const dispatch = useDispatch();

  const increment = () => {
    dispatch({ type: 'INCREMENT' });
  };

  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={increment}>Increment</button>
    </div>
  );
};

export default MyComponent;

通过以上代码，你可以在 React 中使用 Redux 实现类似于 Pinia 的本地存储方式。redux-persist 会自动将 Redux store 的状态保存到本地存储中，并在应用启动时自动还原状态。