如何在Chrome扩展中配置React Redux？含reduxed-chrome-storage配置疑问

1. 安装必要依赖 #

先把所需包安装到项目中：

npm install redux react-redux reduxed-chrome-storage

2. 创建Redux Store #

在项目里新建src/store.js，利用reduxed-chrome-storage提供的工具创建与Chrome存储绑定的Store：

import { createStore, applyMiddleware } from 'redux';
import { wrapStore, createChromeStorageReducer } from 'reduxed-chrome-storage';

// 定义初始状态
const initialState = {
  userSettings: {
    theme: 'light',
    notifications: true
  }
};

// 创建和Chrome存储同步的根reducer，可选local/sync类型
const rootReducer = createChromeStorageReducer(initialState, {
  storageType: 'local'
});

// 创建Store并应用中间件
const store = createStore(rootReducer, applyMiddleware());

// 绑定Store与Chrome存储，实现状态自动同步
wrapStore(store);

export default store;

3. 在React应用中注入Store #

找到根组件文件（如src/index.js），用react-redux的Provider包裹整个应用：

import React from 'react';
import ReactDOM from 'react-dom/client';
import { Provider } from 'react-redux';
import store from './store';
import App from './App';

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <Provider store={store}>
    <App />
  </Provider>
);

4. 在组件中使用Redux #

在业务组件里通过useSelector读取状态，useDispatch修改状态（修改后会自动同步到Chrome存储）：

import React from 'react';
import { useSelector, useDispatch } from 'react-redux';

const SettingsComponent = () => {
  const userSettings = useSelector(state => state.userSettings);
  const dispatch = useDispatch();

  const toggleTheme = () => {
    dispatch({
      type: 'UPDATE',
      payload: {
        userSettings: {
          ...userSettings,
          theme: userSettings.theme === 'light' ? 'dark' : 'light'
        }
      }
    });
  };

  return (
    <div>
      <h2>当前主题：{userSettings.theme}</h2>
      <button onClick={toggleTheme}>切换主题</button>
    </div>
  );
};

export default SettingsComponent;

5. 配置Chrome扩展权限 #

在manifest.json中添加storage权限，否则Chrome会阻止读写操作：

{
  "manifest_version": 3,
  // 其他配置项...
  "permissions": ["storage"]
}

额外提示 #

• reduxed-chrome-storage会自动处理Redux状态与Chrome存储的双向同步，无需手动编写chrome.storage读写逻辑
• 如果需要自定义reducer逻辑，可以结合combineReducers将自定义reducer与Chrome存储绑定的reducer合并
• 针对Manifest V3扩展，webpack无需额外配置即可兼容Chrome API（Chrome API为全局可用）

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