Skip to content

Commit da91d2b

Browse files
committed
update README for createWrapStore
1 parent 1b339fe commit da91d2b

File tree

1 file changed

+13
-8
lines changed

1 file changed

+13
-8
lines changed

README.md

+13-8
Original file line numberDiff line numberDiff line change
@@ -60,16 +60,18 @@ store.ready().then(() => {
6060
```js
6161
// background.js
6262

63-
import {wrapStore} from 'webext-redux';
63+
import {createWrapStore} from 'webext-redux';
6464

6565
const store; // a normal Redux store
6666

67+
const wrapStore = createWrapStore()
6768
wrapStore(store);
6869
```
6970

7071
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.
7172

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.
7375
7476

7577
### 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
110112
// background.js
111113

112114
import { applyMiddleware, createStore } from 'redux';
113-
import { alias, wrapStore } from 'webext-redux';
115+
import { alias } from 'webext-redux';
114116

115117
const aliases = {
116118
// this key is the name of the action to proxy, the value is the action
@@ -296,8 +298,9 @@ As you can see, Web Extension's message passing has caused your date to disappea
296298
```js
297299
// background.js
298300

299-
import {wrapStore} from 'webext-redux';
301+
import {createWrapStore} from 'webext-redux';
300302

303+
const wrapStore = createWrapStore();
301304
const store; // a normal Redux store
302305

303306
wrapStore(store, {
@@ -365,9 +368,10 @@ If any of the individual keys under `state.items` is updated, `state.items` will
365368
```js
366369
// background.js
367370

368-
import {wrapStore} from 'webext-redux';
371+
import {createWrapStore} from 'webext-redux';
369372
import deepDiff from 'webext-redux/lib/strategies/deepDiff/diff';
370373

374+
const wrapStore = createWrapStore();
371375
const store; // a normal Redux store
372376

373377
wrapStore(store, {
@@ -395,9 +399,10 @@ Note that the deep diffing strategy currently diffs arrays shallowly, and patche
395399
```js
396400
// background.js
397401

398-
import {wrapStore} from 'webext-redux';
402+
import {createWrapStore} from 'webext-redux';
399403
import makeDiff from 'webext-redux/lib/strategies/deepDiff/makeDiff';
400404

405+
const wrapStore = createWrapStore();
401406
const store; // a normal Redux store
402407

403408
const shouldContinue = (oldState, newState, context) => {
@@ -423,7 +428,7 @@ A `shouldContinue` function of the form `(oldObj, newObj, context) => context.le
423428

424429
### Custom `diffStrategy` and `patchStrategy` functions
425430

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.
427432
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`.
428433

429434
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
435440
* [Advanced Usage](https://github.com/tshaddix/webext-redux/wiki/Advanced-Usage)
436441
* [API](https://github.com/tshaddix/webext-redux/wiki/API)
437442
* [Store](https://github.com/tshaddix/webext-redux/wiki/Store)
438-
* [wrapStore](https://github.com/tshaddix/webext-redux/wiki/wrapStore)
443+
* [createWrapStore](https://github.com/tshaddix/webext-redux/wiki/createWrapStore)
439444
* [alias](https://github.com/tshaddix/webext-redux/wiki/alias)
440445

441446
## Who's using this?

0 commit comments

Comments
 (0)