Skip to content

Commit

Permalink
Merge pull request #7 from aspect-apps/feature/get-persist-machine-ac…
Browse files Browse the repository at this point in the history
…tion

adding function and updating docs
  • Loading branch information
rodriigovieira authored Dec 9, 2020
2 parents eef25d3 + b7a63dd commit 24cd0f6
Show file tree
Hide file tree
Showing 4 changed files with 51 additions and 24 deletions.
39 changes: 31 additions & 8 deletions docs/README.md
Original file line number Diff line number Diff line change
Expand Up @@ -25,7 +25,7 @@ const loadState = (key) => ...
/**
* You define the structure that you want to save
* in this object, and then pass it as an argument.
* Instructions on how to create this object are above.
* Instructions on how to create this object are bellow.
*/
const structure = {
orders: {
Expand Down Expand Up @@ -68,23 +68,31 @@ persistMiddleware.run(store)

For the load and save method, you don't have to write them by yourself, they are [available as separate packages below](#providers).

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`).
Your reducer data will automatically save 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`).


### Loading Data

You can receive actions in your reducers. The code below will apply the saved state to your current state:
You can receive actions in your reducers.

This allows you to have loading on a per reducer basis separated across the application for stored data instead of having the full application wait for the data to be loaded.

The package exports a function that makes it easier for you to set up a case in the reducer, by generating an action name that matches the one that the package uses under the hood.

The code below will apply the saved state to your current state:

```js
case "@ReduxPM/LoadSubscriptionOrders": {
return {
...state,
import { getPersistMachineAction } from 'redux-persist-machine'

case getPersistMachineAction("load.subscriptionOrders"): {
return {
...state,
...action.payload,
}
}
```

This allows you to have loading on a per reducer basis separated across the application for stored data instead of having the full application wait for the data to be loaded.
Of course, you can also define your own custom action name. This custom action name has to be passed oon the `action` property of the reducer in the structure object.

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

Expand All @@ -105,14 +113,29 @@ Creates a Redux persist middleware with your store structure.

### `createPersistMiddleware(structure, saveState, loadState).run(store)`

- `store :` [Store](https://redux.js.org/api/store) - the redux store.

Starts the persist middleware. You should run this immediately after creating your store.

```js
const persistMiddleware = createPersistMiddleware(structure, saveState, loadState)
persistMiddleware.run(store)
```

- `store :` [Store](https://redux.js.org/api/store) - the redux store.
### `getPersistMachineAction(actionKey)`

Generates an action name based on the provided key. You can use this function to set the case in your reducer to handle the data loading.

```js
case getPersistMachineAction("load.user.orders"): {
return {
...state,
...action.payload,
}
}
```

The example above would return `@ReduxPM/LoadUserOrders`.

## Providers

Expand Down
8 changes: 7 additions & 1 deletion lib/index.d.ts
Original file line number Diff line number Diff line change
Expand Up @@ -23,7 +23,13 @@ declare namespace persistMiddleware {
* to persist.
* @param store - Redux Store
* @param debug - Debug data to the console
*
*/
export declare function createPersistMachine(structure: any, save: SaveCallback, load: LoadCallback, debug: boolean): typeof persistMiddleware;
/**
* Builds a action type.
* e.g. transforms "data.adminAuth" into @ReduxPM/LoadDataAdminAuth
*
* @param {string} key the key to generate the action name
*/
export declare function getPersistMachineAction(key: string): string;
export {};
13 changes: 6 additions & 7 deletions lib/index.js
Original file line number Diff line number Diff line change
Expand Up @@ -80,7 +80,6 @@ function persistMiddleware() {
* to persist.
* @param store - Redux Store
* @param debug - Debug data to the console
*
*/
export function createPersistMachine(structure, save, load, debug) {
// Assign our save and load methods
Expand Down Expand Up @@ -161,15 +160,15 @@ export function createPersistMachine(structure, save, load, debug) {
// Get the static key for mapping
const { key: asyncStorageKey, automatic = true } = object;
// Builds the type from the reducer name, if a type has not been explicitly defined through the `action` value
const action = object.action || buildAction(name);
const action = object.action || getPersistMachineAction(name);
// Initialize and empty currentValue, this is used to keep track of previous values
currentValue[asyncStorageKey] = Object.assign(Object.assign({}, _get(currentValue, name, {})), { key: asyncStorageKey, action,
automatic, isLoaded: false });
});
// If debug, we to log all the actions for loading the state
if (debug) {
_map(structure, (object, name) => __awaiter(this, void 0, void 0, function* () {
console.log(object.action || buildAction(name));
console.log(object.action || getPersistMachineAction(name));
}));
}
return persistMiddleware;
Expand Down Expand Up @@ -202,11 +201,11 @@ function select(state, key) {
return _get(state, key, {});
}
/**
* Builds a action type e.g. transforms "data.adminAuth" into LOAD_DATA_ADMIN_AUTH
* Builds a action type.
* e.g. transforms "data.adminAuth" into @ReduxPM/LoadDataAdminAuth
*
* @param key
* @return {string}
* @param {string} key the key to generate the action name
*/
function buildAction(key) {
export function getPersistMachineAction(key) {
return `@ReduxPM/Load${_startCase(key).split(" ").join("")}`;
}
15 changes: 7 additions & 8 deletions lib/index.ts
Original file line number Diff line number Diff line change
Expand Up @@ -93,7 +93,6 @@ declare namespace persistMiddleware {
* to persist.
* @param store - Redux Store
* @param debug - Debug data to the console
*
*/
export function createPersistMachine(structure: any, save: SaveCallback, load: LoadCallback, debug: boolean) {
// Assign our save and load methods
Expand Down Expand Up @@ -183,7 +182,7 @@ export function createPersistMachine(structure: any, save: SaveCallback, load: L
automatic = true
} = object;
// Builds the type from the reducer name, if a type has not been explicitly defined through the `action` value
const action = object.action || buildAction(name);
const action = object.action || getPersistMachineAction(name);

// Initialize and empty currentValue, this is used to keep track of previous values
currentValue[asyncStorageKey] = {
Expand All @@ -198,7 +197,7 @@ export function createPersistMachine(structure: any, save: SaveCallback, load: L
// If debug, we to log all the actions for loading the state
if (debug) {
_map(structure, async (object: any, name: any) => {
console.log(object.action || buildAction(name));
console.log(object.action || getPersistMachineAction(name));
});
}

Expand Down Expand Up @@ -235,11 +234,11 @@ function select(state: any, key: any): object {
}

/**
* Builds a action type e.g. transforms "data.adminAuth" into LOAD_DATA_ADMIN_AUTH
*
* @param key
* @return {string}
* Builds an action type.
* e.g. transforms "data.adminAuth" into @ReduxPM/LoadDataAdminAuth
*
* @param {string} key the key to generate the action name
*/
function buildAction(key: string) {
export function getPersistMachineAction(key: string): string {
return `@ReduxPM/Load${_startCase(key).split(" ").join("")}`
}

0 comments on commit 24cd0f6

Please sign in to comment.