https://github.com/le-nn/memento
A simple client-side state management container for Blazor/.NET includes redo/undo and ReduxDevTools support.
https://github.com/le-nn/memento
blazor flux redux-devtools state-management store
Last synced: 6 days ago
JSON representation
A simple client-side state management container for Blazor/.NET includes redo/undo and ReduxDevTools support.
- Host: GitHub
- URL: https://github.com/le-nn/memento
- Owner: le-nn
- License: mit
- Created: 2020-12-26T21:43:57.000Z (over 4 years ago)
- Default Branch: main
- Last Pushed: 2024-02-19T06:24:31.000Z (about 1 year ago)
- Last Synced: 2025-04-10T00:52:02.571Z (6 days ago)
- Topics: blazor, flux, redux-devtools, state-management, store
- Language: C#
- Homepage: https://github.com/le-nn/memento
- Size: 28.1 MB
- Stars: 43
- Watchers: 2
- Forks: 2
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
- awesome-blazor - Memento -   A simple client-side state management container for Blazor/.NET includes redo/undo and ReduxDevTools support. (Libraries & Extensions / Tools & Utilities)
README
# Memento
[](https://opensource.org/licenses/MIT)
A simple client-side state management container for Blazor/.NET includes redo/undo and ReduxDevTools support.
### Japanese Link
[使い方と紹介](https://zenn.dev/remrem/articles/32ee38e79f4cf0)
[Redux DevToolsについて](https://zenn.dev/remrem/articles/0768982b3cdc92)
# Basic Concept
We provides a Store that allows you to share state between components.
All stores are managed by a single provider and can subscribe to state change notifications.
Undirectional flow and immutable change of state provides a predictable architecture.
In addition, we provide a store that easily implements Redo/Undo by managing in immutable states.
### For patterns like Flux or MVU
Besides simple store pattern, we also provide patterns inspired by MVU patterns such as Flux and Elm.
Since you should change the state via the Reducer, you can change the state based on stricter rules and observe the state in detail.
### ReduxDevTools
[Redux DevTools](https://github.com/reduxjs/redux-devtools) is supported.
Redux DevTools is a tool for debugging application's state changes.
State can be time traveled and history can be viewed in DevTools.
[See docs](./docs/ReduxDevTools.md) for details of usage.
## DEMO Page
https://le-nn.github.io/memento/
If you have ReduxDevTool installed,
DevTool will launch automatically.
You can do state history and time travel.
# Documentation
https://le-nn.github.io/memento/docs/README.html
## React or TS/JS bindings
Currently, moved to here
https://github.com/le-nn/memento-js
## Features
* Less boilerplate, less rule and simple usage
* Immutable state and Unidirectional flow
* Multiple stores but managed by single provider, so can observe and manage as one state tree
* Observe detailed status with command patterns and makes it easier to monitor what happened within the application
## Concepts and Flow
## Rules
* State should always be read-only.
* The UI then uses the new state to render its display.
### For patterns like Flux
* Every Reducer that processes in the action will create new state to reflect the old state combined with the changes expected for the action.
* To change state our app should Dispatch via Reducer in the action method
## Store Overview
This is an C# and Blazor example that implements counter.
Simple Store Pattern
```csharp
using Memento.Core;
using System.Collections.Immutable;
namespace Memento.Sample.Blazor;
public record AsyncCounterState {
public int Count { get; init; } = 0;
public bool IsLoading { get; init; } = false;
public int[] Histories { get; init; } = [];
}
public class AsyncCounterStore() : Store(() => new()) {
public async Task CountUpAsync() {
Mutate(state => state with { IsLoading = true, });
await Task.Delay(800);
Mutate(state => state with {
IsLoading = false,
Count = state.Count + 1,
Histories = [.. state.Histories, state.Count + 1],
});
}
}
```
Flux Store Pattern
```csharp
public record AsyncCounterState {
public int Count { get; init; } = 0;
public bool IsLoading { get; init; } = false;
public int[] Histories { get; init; } = [];
}
public record AsyncCounterCommands : Command {
public record Increment : AsyncCounterCommands;
public record BeginLoading : AsyncCounterCommands;
}
public class AsyncCounterStore() : FluxStore(() => new(), Reducer) {
static AsyncCounterState Reducer(AsyncCounterState state, AsyncCounterCommands command) {
return command switch {
AsyncCounterCommands.Increment => state with {
Count = state.Count + 1,
IsLoading = false,
Histories = [.. state.Histories, state.Count + 1],
},
AsyncCounterCommands.BeginLoading => state with {
IsLoading = true,
},
_ => throw new CommandNotHandledException(command),
};
}
public async Task CountUpAsync() {
Dispatch(new AsyncCounterCommands.BeginLoading());
await Task.Delay(800);
Dispatch(new AsyncCounterCommands.Increment());
}
}
```
Blazor view in Razor
```razor
@page "/counter"
@inherits ObserverComponet
@inject AsyncCounterStore AsyncCounterStore
Counter
Async Counter
Current count: @AsyncCounterStore.State.Count
Loading: @AsyncCounterStore.State.IsLoading
History
[
@foreach (var item in string.Join(", ", AsyncCounterStore.State.Histories)) {
@item
}
]
Count up
@code {
async Task IncrementCount() {
await AsyncCounterStore.CountUpAsync();
}
}
```
# License
Designed with ♥ by le-nn. Licensed under the MIT License.