Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

FED-681: Add integration docs #800

Merged
merged 5 commits into from
Feb 3, 2023
Merged
Changes from 4 commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
58 changes: 57 additions & 1 deletion doc/over_react_redux_documentation.md
Original file line number Diff line number Diff line change
Expand Up @@ -28,6 +28,7 @@ A Dart wrapper for React Redux, providing targeted state updates.
- [useStore](#usestore)
- **[Using Multiple Stores](#using-multiple-stores)**
- **[Using Redux DevTools](#using-redux-devtools)**
- [Integrating with Devtools](#integration-with-devtools)
greglittlefield-wf marked this conversation as resolved.
Show resolved Hide resolved

## Purpose

Expand Down Expand Up @@ -657,4 +658,59 @@ var store = new DevToolsStore<AppState>(
initialState: /*Default App State Object*/,
middleware: [overReactReduxDevToolsMiddlewareFactory(name: 'Some Custom Instance Name')],
)
```
```

### Integration With DevTools

In order to display the properties of Dart based `Action`s and `State` in the DevTools they must implement a `toJson` method.

`toJson` can be manually added to the classes, or added with the help of something like the the [json_serializable](https://pub.dev/packages/json_serializable) library. In the event that a value is not directly encodeable to `json`, we will make an attempt to call `toJson` on the value.
greglittlefield-wf marked this conversation as resolved.
Show resolved Hide resolved

State Example:
```dart
class FooState {
bool foo = true;

Map<String, dynamic> toJson() => {'foo':foo};
}
```

When converted, the result of `toJson` will be used to present the entire state.
```json lines
{
"foo": true
}
```

Action Example:
```dart
class FooAction {
bool foo = false;

Map<String, dynamic> toJson() => {'foo':foo};
}
```

When converted, the Class name will be the `type` property and `toJson` will become the `payload`
greglittlefield-wf marked this conversation as resolved.
Show resolved Hide resolved
```json lines
{
"type": "FooAction",
"payload": {
"foo": false
}
}
```

Action (Enum) Example:
```dart
enum FooAction {
ACTION_1,
ACTION_2;
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

#nit semicolons aren't valid here

Suggested change
ACTION_2;
ACTION_2,

}
```
When an enum `Action` is used the value of the action in the enum will be used
```json lines
{"type": "ACTION_1"}
```

For a more encoding details check out the [redux_remote_devtools](https://pub.dev/packages/redux_remote_devtools)