From b7a63dd03eb4354e2f72eb487b90e972328c6553 Mon Sep 17 00:00:00 2001 From: Rodrigo Vieira Date: Wed, 9 Dec 2020 03:04:55 -0300 Subject: [PATCH] adding function and updating docs --- docs/README.md | 39 +++++++++++++++++++++++++++++++-------- lib/index.d.ts | 8 +++++++- lib/index.js | 13 ++++++------- lib/index.ts | 15 +++++++-------- 4 files changed, 51 insertions(+), 24 deletions(-) diff --git a/docs/README.md b/docs/README.md index 767b99a..a39c25f 100644 --- a/docs/README.md +++ b/docs/README.md @@ -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: { @@ -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. @@ -105,6 +113,8 @@ 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 @@ -112,7 +122,20 @@ const persistMiddleware = createPersistMiddleware(structure, saveState, loadStat 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 diff --git a/lib/index.d.ts b/lib/index.d.ts index 58cc059..e4572fe 100644 --- a/lib/index.d.ts +++ b/lib/index.d.ts @@ -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 {}; diff --git a/lib/index.js b/lib/index.js index 649be60..5ca4cf2 100644 --- a/lib/index.js +++ b/lib/index.js @@ -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 @@ -161,7 +160,7 @@ 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 }); @@ -169,7 +168,7 @@ export function createPersistMachine(structure, save, load, debug) { // 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; @@ -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("")}`; } diff --git a/lib/index.ts b/lib/index.ts index 4a8239d..22f6a98 100644 --- a/lib/index.ts +++ b/lib/index.ts @@ -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 @@ -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] = { @@ -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)); }); } @@ -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("")}` } \ No newline at end of file