https://github.com/mrkpks/nx-optimistic-state
Optimistic state updates using @nrwl/angular#optimisticUpdate
https://github.com/mrkpks/nx-optimistic-state
angular monorepo ngrx nrwl nrwl-nx typescript
Last synced: 5 months ago
JSON representation
Optimistic state updates using @nrwl/angular#optimisticUpdate
- Host: GitHub
- URL: https://github.com/mrkpks/nx-optimistic-state
- Owner: mrkpks
- Created: 2022-01-19T16:12:00.000Z (over 4 years ago)
- Default Branch: main
- Last Pushed: 2022-02-09T15:29:28.000Z (over 4 years ago)
- Last Synced: 2025-02-04T18:50:47.058Z (over 1 year ago)
- Topics: angular, monorepo, ngrx, nrwl, nrwl-nx, typescript
- Language: TypeScript
- Homepage:
- Size: 692 KB
- Stars: 4
- Watchers: 3
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# NxOptimisticState
### Quickstart:
`$ npm ci`
`$ npx nx serve ou-ui`
This simple project was created as a PoC to show comparison of two different approaches to handling API calls using NgRx Store and @nrwl/angular.
## Sources overview
check these files for more info:
- [tasks.actions.ts](https://github.com/mrkpks/nx-optimistic-state/blob/main/libs/tasks/src/lib/%2Bstate/tasks.actions.ts)
- [tasks.reducer.ts](https://github.com/mrkpks/nx-optimistic-state/blob/main/libs/tasks/src/lib/%2Bstate/tasks.reducer.ts)
- [tasks.effects.ts](https://github.com/mrkpks/nx-optimistic-state/blob/main/libs/tasks/src/lib/%2Bstate/tasks.effects.ts)
## Classic approach
Using loading progress in views triggered by loading flags on FE.
This pattern is relying on 3 types of NgRx Store Actions:
- *Trigger Action* (create, update/edit, delete) which triggers API call; e.g. `deleteTask`
- *Success Action* which processes the response from API; e.g. `deleteTaskSuccess`
- *Failure Action* which processes the error response from API; e.g. `deleteTaskFailure`
Classic success | Classic error
:-------------------------:|:-------------------------:
 | 
### Examples
#### Classic delete
```ts
import * as TasksActions from './tasks.actions';
...
deleteTask$ = createEffect(() =>
this.actions$.pipe(
ofType(TasksActions.deleteTask),
fetch({
run: ({ id }) =>
this.fakeAPI
.deleteTask(id)
.pipe(map((id) => TasksActions.deleteTaskSuccess({ id }))),
onError: (action, error) => {
console.error('Error deleteTask$: ', error);
this.message.error('Could not delete task');
return TasksActions.deleteTaskFailure({ error });
},
})
)
);
```
Classic success | Classic error
:-------------------------:|:-------------------------:
 | 
#### Classic Create task implementation
```ts
import * as TasksActions from './tasks.actions';
...
createTask$ = createEffect(() =>
this.actions$.pipe(
ofType(TasksActions.createTask),
fetch({
run: (action) =>
this.fakeAPI
.createTask(action.name, action.status)
.pipe(map((task) => TasksActions.createTaskSuccess({ task }))),
onError: (action, error) => {
console.error('Error createTask$: ', error);
this.message.error('Could not create task');
return TasksActions.createTaskFailure({ error });
},
})
)
);
```
Classic success | Classic error
:-------------------------:|:-------------------------:
 | 
## Optimistic approach
The Optimistic UI is ideal when the responses from API take longer than desired from UX point of view.
This approach assumes a high success rate of received API responses and (in ideal case*) expecting the response from API wouldn't differ from the actual data modified on client.
Most times is relying on 2 types of NgRx Store Actions:
- *Trigger Action* (create, update/edit, delete) which triggers API call **AND immediately sets the new state** containing new data on client (in store); e.g. `deleteTaskOptimistic`
- *Undo Action* which is triggered upon receiving an error from API. Its purpose is to **revert the new state to original state** before the data modification.
Optimistic success | Optimistic error
:-------------------------:|:-------------------------:
 | 
### Examples
#### Optimistic delete
```ts
import * as TasksActions from './tasks.actions';
...
deleteTaskOptimistic$ = createEffect(() =>
this.actions$.pipe(
ofType(TasksActions.deleteTaskOptimistic),
optimisticUpdate({
run: ({ task }) =>
this.fakeAPI.deleteTask(task.id).pipe(switchMap(() => EMPTY)),
undoAction: ({ task }, error) => {
console.error('Error deleteTask$: ', error);
this.message.error('Could not delete task');
return TasksActions.undoDeleteTask({
error,
task,
});
},
})
)
);
```
Optimistic success | Optimistic error
:-------------------------:|:-------------------------:
 | 
## Edge case for optimistic approach
In some cases, **just as in optimistic create**, there can be a requirement for optimistic approach even though the API response differs in some way from the data modified on client.
This use-case can be handled by adding a *Success Action* which re-maps or adds missing data to our entity.
Optimistic success | Optimistic error
:-------------------------:|:-------------------------:
 | 
### Examples
#### Optimistic Create task implementation
In this case we don't know what ID will be generated on BE, so we need to generate our own on client and replace it in Success Action
```ts
import { optimisticUpdate } from '@nrwl/angular';
import * as TasksActions from './tasks.actions';
...
createTaskOptimistic$ = createEffect(() =>
this.actions$.pipe(
ofType(TasksActions.createTaskOptimistic),
optimisticUpdate({
run: (action) =>
this.api.createTask(action.task.name, action.task.status).pipe(
tap(() => this.message.success('Task created')),
// needs another action for replacing Optimistic ID (oid)
map((task) =>
TasksActions.createTaskOptimisticSuccess({
oid: action.task.id,
task,
})
)
),
undoAction: (action, error) => {
// add error handling here
console.error('Error createTask$');
// call Undo Action
return TasksActions.undoCreateTask({
error,
/**
* notice the the Undo Action's payload - in this case ID is enough,
* we're just removing it from the TasksEntities
**/
id: action.task.id,
});
},
})
)
);
```
Optimistic success | Optimistic error
:-------------------------:|:-------------------------:
 | 