Skip to content

Commit

Permalink
docs: Move actions to own page
Browse files Browse the repository at this point in the history
  • Loading branch information
ntucker committed Aug 15, 2024
1 parent db213fa commit 980a052
Show file tree
Hide file tree
Showing 9 changed files with 176 additions and 164 deletions.
143 changes: 143 additions & 0 deletions docs/core/api/Actions.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,143 @@
---
title: Flux Actions
sidebar_label: Actions
---

# Actions

Actions are minimal descriptions of something that happened in the application.

They can be [read and consumed by Manager middleware](./Manager.md#reading-and-consuming-actions).

Many actions use the same meta information:

```ts
interface ActionMeta {
readonly fetchedAt: number;
readonly date: number;
readonly expiresAt: number;
}
```

## FETCH

```ts
interface FetchMeta {
fetchedAt: number;
resolve: (value?: any | PromiseLike<any>) => void;
reject: (reason?: any) => void;
promise: PromiseLike<any>;
}

interface FetchAction {
type: typeof FETCH_TYPE;
endpoint: Endpoint;
args: readonly [...Parameters<Endpoint>];
key: string;
meta: FetchMeta;
}
```

Comes from [Controller.fetch()](./Controller.md#fetch), [Controller.fetchIfStale()](./Controller.md#fetchIfStale),
[useSuspense()](./useSuspense.md), [useDLE()](./useDLE.md), [useLive()](./useLive.md), [useFetch()](./useFetch.md)

## SET

```ts
interface SetAction {
type: typeof SET_TYPE;
schema: Queryable;
args: readonly any[];
meta: ActionMeta;
value: {} | ((previousValue: Denormalize<Queryable>) => {});
}
```

Comes from [Controller.set()](./Controller.md#set)

## SET_RESPONSE

```ts
interface SetResponseAction {
type: typeof SET_RESPONSE_TYPE;
endpoint: Endpoint;
args: readonly any[];
key: string;
meta: ActionMeta;
response: ResolveType<Endpoint> | Error;
error: boolean;
}
```

Comes from [Controller.setResponse()](./Controller.md#setResponse), [NetworkManager](./NetworkManager.md)

## RESET

```ts
interface ResetAction {
type: typeof RESET_TYPE;
date: number;
}
```

Comes from [Controller.resetEntireStore()](./Controller.md#resetEntireStore)

## SUBSCRIBE

```ts
interface SubscribeAction {
type: typeof SUBSCRIBE_TYPE;
endpoint: Endpoint;
args: readonly any[];
key: string;
}
```

Comes from [Controller.subscribe()](./Controller.md#subscribe), [useSubscription()](./useSubscription.md), [useLive()](./useLive.md)

## UNSUBSCRIBE

```ts
interface UnsubscribeAction {
type: typeof UNSUBSCRIBE_TYPE;
endpoint: Endpoint;
args: readonly any[];
key: string;
}
```

Comes from [Controller.unsubscribe()](./Controller.md#unsubscribe), [useSubscription()](./useSubscription.md), [useLive()](./useLive.md)

## INVALIDATE

```ts
interface InvalidateAction {
type: typeof INVALIDATE_TYPE;
key: string;
}
```

Comes from [Controller.invalidate()](./Controller.md#invalidate)

## INVALIDATEALL

```ts
interface InvalidateAllAction {
type: typeof INVALIDATEALL_TYPE;
testKey: (key: string) => boolean;
}
```

Comes from [Controller.invalidateAll()](./Controller.md#invalidateAll)

## EXPIREALL

```ts
interface ExpireAllAction {
type: typeof EXPIREALL_TYPE;
testKey: (key: string) => boolean;
}
```

Comes from [Controller.expireAll()](./Controller.md#expireAll)

2 changes: 1 addition & 1 deletion docs/core/api/DevToolsManager.md
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,7 @@ class DevToolsManager implements Manager
```
Integrates with [Redux DevTools](https://github.com/reduxjs/redux-devtools) to track
state and actions. Note: does not integrate time-travel.
state and [actions](./Actions.md). Note: does not integrate time-travel.
Add the [chrome extension](https://chrome.google.com/webstore/detail/redux-devtools/lmhkpmbekcpmknklioeibfkpmmfibljd?hl=en)
or [firefox extension](https://addons.mozilla.org/en-US/firefox/addon/reduxdevtools/) to your
Expand Down
147 changes: 6 additions & 141 deletions docs/core/api/Manager.md
Original file line number Diff line number Diff line change
Expand Up @@ -51,7 +51,7 @@ managers that perform work after the DOM is updated and also with the newly comp
Since redux is fully synchronous, an adapter must be placed in front of Reactive Data Client style middleware to
ensure they can consume a promise. Conversely, redux middleware must be changed to pass through promises.

Middlewares will intercept actions that are dispatched and then potentially dispatch their own actions as well.
Middlewares will [intercept actions](#reading-and-consuming-actions) that are dispatched and then potentially [dispatch their own actions](#dispatching-actions) as well.
To read more about middlewares, see the [redux documentation](https://redux.js.org/advanced/middleware).

### init(state) {#init}
Expand Down Expand Up @@ -209,7 +209,7 @@ export default function RootLayout() {
## Control flow

Managers integrate with the DataProvider store with their lifecycles and middleware. They orchestrate complex control
flows by interfacing via intercepting and dispatching actions, as well as reading the internal state.
flows by interfacing via intercepting and dispatching [actions](./Actions.md), as well as reading the internal state.

<ThemedImage
alt="Manager flux flow"
Expand All @@ -219,7 +219,7 @@ sources={{
}}
/>

The job of `middleware` is to dispatch actions, respond to actions, or both.
The job of `middleware` is to dispatch actions, respond to [actions](./Actions.md), or both.

### Dispatching Actions

Expand Down Expand Up @@ -261,7 +261,7 @@ export default class TimeManager implements Manager {

### Reading and Consuming Actions

`actionTypes` includes all constants to distinguish between different actions.
`actionTypes` includes all constants to distinguish between different [actions](./Actions.md).

<TypeScriptEditor>

Expand Down Expand Up @@ -303,7 +303,7 @@ export default class LoggingManager implements Manager {
In conditional blocks, the action [type narrows](https://www.typescriptlang.org/docs/handbook/2/everyday-types.html#working-with-union-types),
encouraging safe access to its members.

In case we want to 'handle' a certain `action`, we can 'consume' it by not calling next.
In case we want to 'handle' a certain [action](./Actions.md), we can 'consume' it by not calling next.

<TypeScriptEditor>

Expand Down Expand Up @@ -355,142 +355,7 @@ export default class CustomSubsManager implements Manager {
</TypeScriptEditor>

By `return Promise.resolve();` instead of calling `next(action)`, we prevent managers listed
after this one from seeing that action.
after this one from seeing that [action](./Actions.md).

Types: `FETCH_TYPE`, `SET_TYPE`, `SET_RESPONSE_TYPE`, `RESET_TYPE`, `SUBSCRIBE_TYPE`,
`UNSUBSCRIBE_TYPE`, `INVALIDATE_TYPE`, `INVALIDATEALL_TYPE`, `EXPIREALL_TYPE`

## Actions

Many actions use the same meta information:

```ts
interface ActionMeta {
readonly fetchedAt: number;
readonly date: number;
readonly expiresAt: number;
}
```

### FETCH

```ts
interface FetchMeta {
fetchedAt: number;
resolve: (value?: any | PromiseLike<any>) => void;
reject: (reason?: any) => void;
promise: PromiseLike<any>;
}

interface FetchAction {
type: typeof FETCH_TYPE;
endpoint: Endpoint;
args: readonly [...Parameters<Endpoint>];
key: string;
meta: FetchMeta;
}
```

Comes from [Controller.fetch()](./Controller.md#fetch), [Controller.fetchIfStale()](./Controller.md#fetchIfStale),
[useSuspense()](./useSuspense.md), [useDLE()](./useDLE.md), [useLive()](./useLive.md), [useFetch()](./useFetch.md)

### SET

```ts
interface SetAction {
type: typeof SET_TYPE;
schema: Queryable;
args: readonly any[];
meta: ActionMeta;
value: {} | ((previousValue: Denormalize<Queryable>) => {});
}
```

Comes from [Controller.set()](./Controller.md#set)

### SET_RESPONSE

```ts
interface SetResponseAction {
type: typeof SET_RESPONSE_TYPE;
endpoint: Endpoint;
args: readonly any[];
key: string;
meta: ActionMeta;
response: ResolveType<Endpoint> | Error;
error: boolean;
}
```

Comes from [Controller.setResponse()](./Controller.md#setResponse), [NetworkManager](./NetworkManager.md)

### RESET

```ts
interface ResetAction {
type: typeof RESET_TYPE;
date: number;
}
```

Comes from [Controller.resetEntireStore()](./Controller.md#resetEntireStore)

### SUBSCRIBE

```ts
interface SubscribeAction {
type: typeof SUBSCRIBE_TYPE;
endpoint: Endpoint;
args: readonly any[];
key: string;
}
```

Comes from [Controller.subscribe()](./Controller.md#subscribe), [useSubscription()](./useSubscription.md), [useLive()](./useLive.md)

### UNSUBSCRIBE

```ts
interface UnsubscribeAction {
type: typeof UNSUBSCRIBE_TYPE;
endpoint: Endpoint;
args: readonly any[];
key: string;
}
```

Comes from [Controller.unsubscribe()](./Controller.md#unsubscribe), [useSubscription()](./useSubscription.md), [useLive()](./useLive.md)

### INVALIDATE

```ts
interface InvalidateAction {
type: typeof INVALIDATE_TYPE;
key: string;
}
```

Comes from [Controller.invalidate()](./Controller.md#invalidate)

### INVALIDATEALL

```ts
interface InvalidateAllAction {
type: typeof INVALIDATEALL_TYPE;
testKey: (key: string) => boolean;
}
```

Comes from [Controller.invalidateAll()](./Controller.md#invalidateAll)

### EXPIREALL

```ts
interface ExpireAllAction {
type: typeof EXPIREALL_TYPE;
testKey: (key: string) => boolean;
}
```

Comes from [Controller.expireAll()](./Controller.md#expireAll)

2 changes: 1 addition & 1 deletion docs/core/api/SubscriptionManager.md
Original file line number Diff line number Diff line change
Expand Up @@ -67,7 +67,7 @@ Provides any cleanup of dangling resources after Subscription is no longer in us
:::note

Implementing your own `Subscription` to handle websockets can be done by
dispatching `rdc/set` actions with the data it gets to update.
[dispatching](./Controller.md#set) `rdc/set` actions with the data it gets to update.
Be sure to handle connection opening in the constructor and close the connection
in `cleanup()`

Expand Down
4 changes: 2 additions & 2 deletions docs/core/api/useSubscription.md
Original file line number Diff line number Diff line change
Expand Up @@ -114,7 +114,7 @@ us to access the [DOM](https://developer.mozilla.org/en-US/docs/Web/API/Document

### Crypto prices (websockets)

We implemented our own `StreamManager` to handle our custom websocket protocol. Here we listen to the subcribe/unsubcribe
actions sent by `useSubscription` to ensure we only listen to updates for components that are rendered.
We implemented our own `StreamManager` to handle our custom websocket protocol. Here we listen to the [subcribe/unsubcribe
actions](./Actions.md#subscribe) sent by `useSubscription` to ensure we only listen to updates for components that are rendered.

<StackBlitz app="coin-app" file="src/resources/StreamManager.ts,src/resources/Ticker.ts,src/pages/Home/AssetPrice.tsx" height="600" />
3 changes: 3 additions & 0 deletions docs/core/api/useSuspense.md
Original file line number Diff line number Diff line change
Expand Up @@ -373,6 +373,9 @@ means immediate user interactivity with **zero** client-side fetches on first lo

<StackBlitz app="nextjs" file="resources/TodoResource.ts,components/todo/TodoList.tsx" />

Usage in components is identical, which means you can easily share components between SSR and non-SSR
applications, as well as migrate to <abbr title="Server Side Render">SSR</abbr> without needing data-client code changes.

### Concurrent Mode

In React 18 navigating with `startTransition` allows [AsyncBoundaries](./AsyncBoundary.md) to
Expand Down
2 changes: 1 addition & 1 deletion docs/core/getting-started/debugging.md
Original file line number Diff line number Diff line change
Expand Up @@ -89,7 +89,7 @@ Here we toggled the 'completed' status of a todo using an [optimistic update](/r
## Action Tracing

Tracing is not enabled by default as it is very computationally expensive. However, it can be very useful
in tracking down where actions are dispatched from. Customize [DevToolsManager](../api/DevToolsManager.md)
in tracking down where [actions](../api/Actions.md) are dispatched from. Customize [DevToolsManager](../api/DevToolsManager.md)
by setting the trace option to `true` with [getDefaultManagers](../api/getDefaultManagers.md):

```tsx title="index.tsx"
Expand Down
Loading

0 comments on commit 980a052

Please sign in to comment.