You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Copy file name to clipboardExpand all lines: README.md
+13-8
Original file line number
Diff line number
Diff line change
@@ -60,16 +60,18 @@ store.ready().then(() => {
60
60
```js
61
61
// background.js
62
62
63
-
import {wrapStore} from'webext-redux';
63
+
import {createWrapStore} from'webext-redux';
64
64
65
65
conststore; // a normal Redux store
66
66
67
+
constwrapStore=createWrapStore()
67
68
wrapStore(store);
68
69
```
69
70
70
71
That's it! The dispatches called from UI component will find their way to the background page no problem. The new state from your background page will make sure to find its way back to the UI components.
71
72
72
-
73
+
> [!NOTE]
74
+
> `createWrapStore()` sets up listeners for browser messaging. In MV3, it must be registered synchronously when the service worker starts. This ensures `dispatch()` calls that wake the service worker are received. Messages are queued internally until `wrapStore()` is called, and the events can be dispatched to the store.
73
75
74
76
75
77
### 3. Optional: Apply any redux middleware to your *Proxy Store* with `applyMiddleware()`
@@ -110,7 +112,7 @@ Sometimes you'll want to make sure the logic of your action creators happen in t
@@ -423,7 +428,7 @@ A `shouldContinue` function of the form `(oldObj, newObj, context) => context.le
423
428
424
429
### Custom `diffStrategy` and `patchStrategy` functions
425
430
426
-
You can also provide your own diffing and patching strategies, using the `diffStrategy` parameter in `wrapStore` and the `patchStrategy` parameter in `Store`, repsectively. A diffing strategy should be a function that takes two arguments - the old state and the new state - and returns a patch, which can be of any form. A patch strategy is a function that takes two arguments - the old state and a patch - and returns the new state.
431
+
You can also provide your own diffing and patching strategies, using the `diffStrategy` parameter in `wrapStore` and the `patchStrategy` parameter in `Store`, respectively. A diffing strategy should be a function that takes two arguments - the old state and the new state - and returns a patch, which can be of any form. A patch strategy is a function that takes two arguments - the old state and a patch - and returns the new state.
427
432
When using a custom diffing and patching strategy, you are responsible for making sure that they function as expected; that is, that `patchStrategy(oldState, diffStrategy(oldState, newState))` is equal to `newState`.
428
433
429
434
Aside from being able to fine-tune `webext-redux`'s performance, custom diffing and patching strategies allow you to use `webext-redux` with Redux stores whose states are not vanilla Javascript objects. For example, you could implement diffing and patching strategies - along with corresponding custom serialization and deserialization functions - that allow you to handle [Immutable.js](https://github.com/facebook/immutable-js) collections.
@@ -435,7 +440,7 @@ Aside from being able to fine-tune `webext-redux`'s performance, custom diffing
0 commit comments