Reduxを使ったクイックスタート

ブラウザ拡張機能全体で状態を管理する簡単な方法を提供するために、Reduxを簡単に統合できます。

redux-persist (opens in a new tab) をフォークしたものを、chrome.storage を使用してReduxの状態を永続化するために、redux-persist-webextension-storage (opens in a new tab) と共に使用できます。

⚠️

Reduxのサポートは、大規模なオープンソースコミュニティによって提供されています。機能しない場合は、ご協力いただければ幸いです！カスタム統合については、コンサルティングサービスを提供しています。詳細はsupport@plasmo.comまでメールでお問い合わせください。

インクリメントの例

カウンターを増減する基本的な拡張機能を作成してみましょう。

スライスの作成

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.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)
 
// This is what makes Redux sync properly with multiple pages
// Open your extension's options page and popup to see it in action
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("State changed with: ", store?.getState())
})

完全な例

完全な例については、with-redux (opens in a new tab) を参照してください。

Quickstart: Stripe Quickstart: Tailwind CSS