Redux快速入门

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

我们分叉了 redux-persist (opens in a new tab)，您可以结合 redux-persist-webextension-storage (opens in a new tab) 使用，以通过 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() 调用。这将在 chrome.storage 中的Redux状态发生变化时自动重新同步存储。

在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 可确保子组件在存储准备好之前不会渲染。

在后台服务工作线程中使用

background.ts

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

完整示例

查看 with-redux (opens in a new tab) 获取完整示例。

快速入门: Stripe 快速入门: Tailwind CSS