Skip to content

Commit 5bd7660

Browse files
author
Luke Brandon Farrell
authored
Update README.md
1 parent 16508b4 commit 5bd7660

File tree

1 file changed

+36
-29
lines changed

1 file changed

+36
-29
lines changed

docs/README.md

Lines changed: 36 additions & 29 deletions
Original file line numberDiff line numberDiff line change
@@ -15,34 +15,18 @@ import { createPersistMachine } from "redux-persist-machine";
1515

1616
### Setup
1717

18-
There are a couple of things you need to get started. Firstly add the return of `createPersistMiddleware` to your redux middleware.
19-
20-
The `createPersistMiddleware()` parameters are:
21-
- the structure of your store and use arrays to define what values you want the middleware to persist
22-
- a save method
23-
- a load method
24-
- (optional) whether to enable debug or not
25-
26-
The structure of your store consist of an object that takes some objects, and each object has to follow the following schema:
27-
28-
- The key of each value in the persist object should match your store shape, a nested reducer would be defined as such: `data.device`.
29-
- In the `values` key, you can customize which values the package will keep track of. If nothing is provided to the `values` field, all fields will be saved.
30-
- A `key` is required to be defined for each persisted reducer, this will be used as the async storage key, it keeps a static map of your data which is independent of its shape, which is useful as your application grows.
31-
- An optional key of `action` can be defined to explicitly declare which action type should trigger a load of that reducer, without this value each load type is generated automatically from the state shape. e.g. to load `"data.device"` fire `LOAD_DATA_DEVICE`, to load `"subscriptionOrders"` fire `LOAD_SUBSCRIPTION_ORDERS`.
32-
- An optional `automatic` key can also be provided to specify if that reducer should be loaded automatically, without having to dispatch the action. It defaults to `true`.
33-
34-
For the load and save method, you don't have to write them by yourself, they are [available as separate packages below](#providers).
18+
Firstly add the return value of `createPersistMiddleware` to your redux middleware. Then after creating your store, run the `createPersistMiddleware().run` method.
3519

3620
```js
3721
// e.g. save and load methods -> available as separate packages below
3822
const saveState = (key, state) => ...
3923
const loadState = (key) => ...
4024

41-
/**
42-
You define the structure that you want to save
43-
in this object, and then pass it as an argument.
44-
Instructions on how to create this object are above.
45-
*/
25+
/**
26+
* You define the structure that you want to save
27+
* in this object, and then pass it as an argument.
28+
* Instructions on how to create this object are above.
29+
*/
4630
const structure = {
4731
orders: {
4832
values: ["data", "updatedAt", "index"],
@@ -69,8 +53,6 @@ const structure = {
6953
}
7054
};
7155

72-
// store.js
73-
7456
const persistMiddleware = createPersistMiddleware(
7557
structure, saveState, loadState
7658
)
@@ -80,15 +62,15 @@ export const store = createStore(
8062
reducers,
8163
applyMiddleware(...middleware)
8264
);
65+
66+
// After setting the middleware in the store, you need to call `.run` and pass the store as an argument.
67+
persistMiddleware.run(store)
8368
```
8469

85-
Your reducer data will automatically saved when the values are changed. You can load each reducer using its load action (to see all the load actions generated in your console set the fourth parameter of `createPersistMachine` to `true`).
70+
For the load and save method, you don't have to write them by yourself, they are [available as separate packages below](#providers).
8671

87-
After setting the middleware in the store, you need to call `createPersistMachine.run` and pass the store as an argument.
72+
Your reducer data will automatically saved when the values are changed. You can load each reducer using its load action (to see all the load actions generated in your console set the fourth parameter of `createPersistMachine` to `true`).
8873

89-
```js
90-
createPersistMachine.run(store)
91-
```
9274

9375
### Loading Data
9476

@@ -107,6 +89,31 @@ This allows you to have loading on a per reducer basis separated across the appl
10789

10890
The middleware runs: `action.payload = { ...storedData, ...action.payload };` to add the saved data to the payload when the `LOAD_ACTION` is triggered. You can also pass additional data in your payload to add context to your `LOAD_ACTIONS` for complex conditional consummation of the loaded data in your reducers.
10991

92+
## API Reference
93+
94+
### `createPersistMiddleware(structure, saveState, loadState)`
95+
96+
Creates a Redux persist middleware with your store structure.
97+
98+
- `structure: Object` - A object to define how you want to load your reducer values. The key of each value in the persist object should match your store shape, a nested reducer would be defined as such: `data.device`. Currently supported options are:
99+
- `values : Array` you can customize which values the package will keep track of. If nothing is provided to the `values` field, all fields will be saved.
100+
- `key : string` this will be used as the storage key, it keeps a static map of your data which is independent of its shape, which is useful if your reducers change their structure or name.
101+
- `action : string` defined to explicitly declare which action type should trigger a load of that reducer, without this value each load type is generated automatically from the state shape. e.g. to load `"data.device"` fire `@ReduxPM/LoadDataDevice`.
102+
- `automatic : boolean` to specify if that reducer should be loaded automatically, without having to dispatch the action. It defaults to `true`.
103+
- `saveState : Function` - a save function with the following signature `(key, state) => void`
104+
- `loadState : Function` - a load function with the following signature `(key) => Object`
105+
106+
### `createPersistMiddleware(structure, saveState, loadState).run(store)`
107+
108+
Starts the persist middleware. You should run this immediately after creating your store.
109+
110+
```js
111+
const persistMiddleware = createPersistMiddleware(structure, saveState, loadState)
112+
persistMiddleware.run(store)
113+
```
114+
115+
- `store: [Store](https://redux.js.org/api/store)` the redux store.
116+
110117
## Providers
111118

112119
Links for save and load functions for diffrent libraries and platforms.

0 commit comments

Comments
 (0)