Skip to content

Commit 1a625c6

Browse files
Add Reflux docs and fix API sidebar (#14)
## Summary - Add Reflux documentation page at /docs/reflux/ - Add missing packages to API sidebar (reflux, dart_logging, dart_node_mcp, dart_node_better_sqlite3) ## Test plan - [ ] Verify /docs/reflux/ page loads correctly - [ ] Verify API sidebar shows all packages - [ ] Verify Reflux API page has no Redux external links
1 parent bdae492 commit 1a625c6

3 files changed

Lines changed: 158 additions & 4 deletions

File tree

website/scripts/generate-api-docs.js

Lines changed: 1 addition & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -80,10 +80,7 @@ const PACKAGE_DOCS = {
8080
dart_logging: [
8181
{ name: 'Dart logging package', url: 'https://pub.dev/packages/logging' },
8282
],
83-
reflux: [
84-
{ name: 'Redux Documentation', url: 'https://redux.js.org/' },
85-
{ name: 'Redux Core Concepts', url: 'https://redux.js.org/introduction/core-concepts' },
86-
],
83+
reflux: [],
8784
};
8885

8986
// Maps element name patterns to doc generators

website/src/_includes/layouts/api.njk

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -12,6 +12,10 @@ layout: layouts/base.njk
1212
<li><a href="/api/dart_node_react/">dart_node_react</a></li>
1313
<li><a href="/api/dart_node_react_native/">dart_node_react_native</a></li>
1414
<li><a href="/api/dart_node_ws/">dart_node_ws</a></li>
15+
<li><a href="/api/dart_node_better_sqlite3/">dart_node_better_sqlite3</a></li>
16+
<li><a href="/api/dart_node_mcp/">dart_node_mcp</a></li>
17+
<li><a href="/api/dart_logging/">dart_logging</a></li>
18+
<li><a href="/api/reflux/">reflux</a></li>
1519
</ul>
1620
</div>
1721

website/src/docs/reflux/index.md

Lines changed: 153 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,153 @@
1+
---
2+
layout: layouts/docs.njk
3+
title: reflux
4+
description: State management for React with Dart and Flutter. Predictable state container with type-safe actions.
5+
eleventyNavigation:
6+
key: reflux
7+
parent: Packages
8+
order: 9
9+
---
10+
11+
Reflux is a state management library for **React with Dart** and **Flutter**. It provides a predictable state container with full type safety using Dart's sealed classes for exhaustive pattern matching.
12+
13+
## Installation
14+
15+
```yaml
16+
dependencies:
17+
reflux: ^0.9.0
18+
```
19+
20+
## Core Concepts
21+
22+
### Store
23+
24+
The store holds the complete state tree of your application. There should be a single store for the entire app.
25+
26+
```dart
27+
import 'package:reflux/reflux.dart';
28+
29+
final store = createStore(counterReducer, (count: 0));
30+
```
31+
32+
### Actions
33+
34+
Actions are sealed classes that describe what happened. Use Dart's pattern matching on the actual TYPE, not strings.
35+
36+
```dart
37+
sealed class CounterAction extends Action {}
38+
39+
final class Increment extends CounterAction {}
40+
final class Decrement extends CounterAction {}
41+
final class SetValue extends CounterAction {
42+
const SetValue(this.value);
43+
final int value;
44+
}
45+
```
46+
47+
### Reducers
48+
49+
Reducers are pure functions that specify how state changes in response to actions.
50+
51+
```dart
52+
typedef CounterState = ({int count});
53+
54+
CounterState counterReducer(CounterState state, Action action) =>
55+
switch (action) {
56+
Increment() => (count: state.count + 1),
57+
Decrement() => (count: state.count - 1),
58+
SetValue(:final value) => (count: value),
59+
_ => state,
60+
};
61+
```
62+
63+
## Quick Start
64+
65+
```dart
66+
import 'package:reflux/reflux.dart';
67+
68+
// State as a record
69+
typedef CounterState = ({int count});
70+
71+
// Actions as sealed classes
72+
sealed class CounterAction extends Action {}
73+
final class Increment extends CounterAction {}
74+
final class Decrement extends CounterAction {}
75+
76+
// Reducer with pattern matching
77+
CounterState counterReducer(CounterState state, Action action) =>
78+
switch (action) {
79+
Increment() => (count: state.count + 1),
80+
Decrement() => (count: state.count - 1),
81+
_ => state,
82+
};
83+
84+
void main() {
85+
final store = createStore(counterReducer, (count: 0));
86+
87+
store.subscribe(() => print('Count: ${store.getState().count}'));
88+
89+
store.dispatch(Increment()); // Count: 1
90+
store.dispatch(Increment()); // Count: 2
91+
store.dispatch(Decrement()); // Count: 1
92+
}
93+
```
94+
95+
## Middleware
96+
97+
Middleware provides a third-party extension point between dispatching an action and the reducer.
98+
99+
```dart
100+
Middleware<CounterState> loggerMiddleware() =>
101+
(api) => (next) => (action) {
102+
print('Dispatching: ${action.runtimeType}');
103+
next(action);
104+
print('State: ${api.getState()}');
105+
};
106+
107+
final store = createStore(
108+
counterReducer,
109+
(count: 0),
110+
enhancer: applyMiddleware([loggerMiddleware()]),
111+
);
112+
```
113+
114+
## Selectors
115+
116+
Selectors extract and memoize derived data from the state.
117+
118+
```dart
119+
final getCount = createSelector1(
120+
(CounterState s) => s.count,
121+
(count) => count * 2,
122+
);
123+
124+
final doubledCount = getCount(store.getState());
125+
```
126+
127+
## Time Travel
128+
129+
The TimeTravelEnhancer allows you to undo/redo state changes.
130+
131+
```dart
132+
final timeTravel = TimeTravelEnhancer<CounterState>();
133+
134+
final store = createStore(
135+
counterReducer,
136+
(count: 0),
137+
enhancer: timeTravel.enhancer,
138+
);
139+
140+
store.dispatch(Increment());
141+
store.dispatch(Increment());
142+
143+
timeTravel.undo(); // Go back one step
144+
timeTravel.redo(); // Go forward one step
145+
```
146+
147+
## API Reference
148+
149+
See the [full API documentation](/api/reflux/) for all available functions and types.
150+
151+
## Source Code
152+
153+
The source code is available on [GitHub](https://github.com/melbournedeveloper/dart_node/tree/main/packages/reflux).

0 commit comments

Comments
 (0)