Skip to content
Open
Show file tree
Hide file tree
Changes from all 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
2 changes: 1 addition & 1 deletion .config/dotnet-tools.json
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@
"isRoot": true,
"tools": {
"fable": {
"version": "4.9.0",
"version": "4.7.0",
"commands": [
"fable"
]
Expand Down
5 changes: 3 additions & 2 deletions src/ElmishStore.Example/ElmishStore.Example.fsproj
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
<?xml version="1.0" encoding="utf-8"?>
<?xml version="1.0" encoding="utf-8"?>
<Project Sdk="Microsoft.NET.Sdk">
<PropertyGroup>
<TargetFramework>net8.0</TargetFramework>
Expand Down Expand Up @@ -31,8 +31,9 @@
</ItemGroup>
<ItemGroup>
<PackageReference Include="Fable.Elmish.Debugger" Version="4.0.0" />
<PackageReference Include="Feliz" Version="2.8.0" />
</ItemGroup>
<ItemGroup>
<ProjectReference Include="..\ElmishStore\ElmishStore.fsproj" />
</ItemGroup>
</Project>
</Project>
32 changes: 24 additions & 8 deletions src/ElmishStore.Example/ModelStore.fs
Original file line number Diff line number Diff line change
Expand Up @@ -11,19 +11,35 @@ open Elmish.Debug

#endif

let store =
Program.mkProgram init update (fun _ _ -> ())
#if DEBUG
|> Program.withConsoleTrace
|> Program.withDebugger
#endif
|> ElmishStore.createStore "main"
// One additional step (comparing with the previous module-based API).
// However, creating the Host on the global level is essentially the same as using the module-based API.
let storesHost = ElmishStoresHost<string>()

let store =
let program =
Program.mkProgram init update (fun _ _ -> ())
#if DEBUG
|> Program.withConsoleTrace
|> Program.withDebugger
#endif
storesHost.create "main" program

(*// Previous API:
[<Hook>]
let useSelector (selector: Model -> 'a) = React.useElmishStore (store, selector)

[<Hook>]
let useSelectorMemoized (memoizedSelector: Model -> 'a) =
React.useElmishStoreMemoized (store, memoizedSelector)
React.useElmishStoreMemoized (store, memoizedSelector)
*)

// Instead of defining separate custom hooks for a specific Store,
// just create all the Store-related hooks packed in an object.
let storeApi = StoreApi.getElmishStoreApi store

// These helpers should be inline so that Fable doesn't generate unnecessary extra-functions around the hooks.
// However, these helpers aren't really needed, as the hooks could be called directly from the `storeApi` value.
let inline useSelector selector = storeApi.useSelector selector
let inline useSelectorMemoized selector = storeApi.useSelectorMemoized selector

let dispatch = store.Dispatch
Loading