使用 Redux 快速开始

轻松集成 Redux，为您的浏览器扩展提供简单的状态管理方式。

我们分叉了 redux-persist ，您可以将其与 redux-persist-webextension-storage 一起使用，使用 chrome.storage 持久化您的 Redux 状态。

⚠️

Redux 的支持由开源社区提供。如果它不起作用，我们欢迎您的贡献！对于自定义集成，我们提供咨询服务。请发送电子邮件至 support@plasmo.com 获取更多详情。

增量示例

让我们制作一个基本的扩展，增加和减少计数器。

创建您的 Slice

counter-slice.ts


import { createSlice } from "@reduxjs/toolkit"
 
export interface CounterState {
  count: number
}
 
const counterSlice = createSlice({
  name: "counter",
  initialState: { count: 0 },
  reducers: {
    increment: (state) => {
      state.count += 1
    },
    decrement: (state) => {
      state.count -= 1
    }
  }
})
 
export const { increment, decrement } = counterSlice.actions
 
export default counterSlice.reducer

创建您的 Store

store.ts


import { configureStore } from "@reduxjs/toolkit"
import { localStorage } from "redux-persist-webextension-storage"
 
import {
  FLUSH,
  PAUSE,
  PERSIST,
  PURGE,
  REGISTER,
  REHYDRATE,
  RESYNC,
  persistReducer,
  persistStore
} from "@plasmohq/redux-persist"
import { Storage } from "@plasmohq/storage"
 
import counterSlice from "~counter-slice"
 
const rootReducer = counterSlice
 
const persistConfig = {
  key: "root",
  version: 1,
  storage: localStorage
}
 
const persistedReducer = persistReducer(persistConfig, rootReducer)
 
export const store = configureStore({
  reducer: persistedReducer,
  middleware: (getDefaultMiddleware) =>
    getDefaultMiddleware({
      serializableCheck: {
        ignoredActions: [
          FLUSH,
          REHYDRATE,
          PAUSE,
          PERSIST,
          PURGE,
          REGISTER,
          RESYNC
        ]
      }
    })
})
export const persistor = persistStore(store)
 
// 这是使 Redux 与多个页面正确同步的原因
// 打开您的扩展的选项页面和弹出窗口以查看其运行情况
new Storage().watch({
  [`persist:${persistConfig.key}`]: () => {
    persistor.resync()
  }
})

需要注意的 new Storage().watch() 调用。每当 Redux store 在 chrome.storage 中发生变化时，这将自动重新同步 store。

在 React 中使用

options.tsx


import { Provider } from "react-redux"
 
import { PersistGate } from "@plasmohq/redux-persist/integration/react"
 
import { CounterView } from "~counter"
import { persistor, store } from "~store"
 
function Options() {
  return (
    <Provider store={store}>
      <PersistGate loading={null} persistor={persistor}>
        <CounterView />
      </PersistGate>
    </Provider>
  )
}
 
export default Options

使用 PersistGate 将确保在 store 准备好之前不会渲染子组件。

在后台服务工作者中使用

background.ts


import { persistor, store } from "~store"
 
persistor.subscribe(() => {
  console.log("状态已更改: ", store?.getState())
})

完整示例

查看 with-redux 获取完整示例。