Merge pull request #2 from emeks-studio/feat/simplify-interface

Simplify deferred actions interface by using Rescript Core Map

Author: mk-emeks

HISTORY.md

@@ -1,4 +1,8 @@
-## 1.0.0
+## 2.0.0
+
+* Simplify API around deferred actions.
+
+## 1.0.1
 
 * Fork from `rescript-react-update`. 
 * Re-design and extend the API.

README.md

@@ -10,20 +10,6 @@ As a consequence, of the fix, the library also introduce an elegant approach in
 A `deferred action` is an `action` that is not immediately dispatched, but rather scheduled to be dispatched later.
 In contrast with `reducers` (that given an action and the state, provides the new state), a `scheduler` is a function that given the current context and a deferred action, can execute (user defined) side effects, and return (or not) a cleanup/cancellation function associated with.
 
-## Installation
-
-```console
-$ yarn add rescript-react-restate
-```
-
-or
-
-```console
-$ npm install --save rescript-react-restate
-```
-
-Then add `rescript-react-restate` to your `bsconfig.json` `bs-dependencies` field.
-
 ## Handling side effects (Asynchronous actions, logging, etc.)
 
 `Restate` powers up reducers by allow them not just update state, but also defer an action to be dispatched later if is desired. This is useful when you want to handle side effects (like logging, network requests, etc.) after the state has been updated.
@@ -44,36 +30,23 @@ type deferredAction =
   | LogIncrement
   | LogDecrement
 
-// Because of implementation details related on how we clean up the side effects, we need to provide a way to identify each deferred action. In other words, deferred actions, must have a unique identifier.
-module DeferredAction: Restate.HasDeferredAction with type t = deferredAction = {
-  type t = deferredAction
-  let variantId = action =>
-    switch action {
-    | LogIncrement => "LogIncrement"
-    | LogDecrement => "LogDecrement"
-  }
-}
-
-// Instantiate the reducer with your deferred action type
-module RestateReducer = Restate.MakeReducer(DeferredAction)
-
 // A Reducer now can update the state and schedule deferred actions (if they need to)
 let reducer = (state, action) => 
  switch action {
    | Increment =>
-     RestateReducer.UpdateWithDeferred(
+     Restate.UpdateWithDeferred(
        state + 1,
        LogIncrement,
      )
    | Decrement =>
-     RestateReducer.UpdateWithDeferred(
+     Restate.UpdateWithDeferred(
        state - 1,
        LogDecrement,
      )
    }
 
 // A Scheduler handle deferred actions by triggering side effects and returning a cleanup function (if necessary)
-let scheduler: (RestateReducer.self<state, action>, deferredAction) => option<unit=>unit> = 
+let scheduler: (Restate.self<state, action, deferredAction>, deferredAction) => option<unit=>unit> = 
   (self, deferredAction) =>
     switch deferredAction {
     | LogIncrement =>
@@ -88,7 +61,7 @@ let scheduler: (RestateReducer.self<state, action>, deferredAction) => option<un
 
 @react.component
 let make = () => {
-  let (state, send, _defer) = RestateReducer.useReducer(reducer, scheduler, 0)
+  let (state, send, _defer) = Restate.useReducer(reducer, scheduler, 0)
   <div>
     {state->React.int}
     <button onClick={_ => send(Decrement)}> {"-"->React.string} </button>
@@ -101,3 +74,28 @@ let make = () => {
 
 If you'd rather initialize state lazily (if there's some computation you don't want executed at every render for instance), use `useReducerWithMapState` where the first argument is a function taking `unit` and returning the initial state.
 
+## Installation
+
+```console
+$ yarn add rescript-react-restate
+```
+
+or
+
+```console
+$ npm install --save rescript-react-restate
+```
+
+Then add `rescript-react-restate` to your `bsconfig.json` `bs-dependencies` field.
+
+## Development
+
+```console
+nix develop
+
+# Run examples server:
+yarn dev
+
+# Build and watch rescript:
+yarn re:watch
+```

examples/BasicUsage.res

@@ -37,24 +37,16 @@ module ReactRestate = {
   type action = Tick | Reset
   type state = {elapsed: int}
   type deferredAction = ScheduleNextTick
-  module DeferredAction: Restate.HasDeferredAction with type t = deferredAction = {
-      type t = deferredAction
-      let variantId = action =>
-        switch action {
-        | ScheduleNextTick => "ScheduleNextTick"
-      }
-    }
-  module RestateReducer = Restate.MakeReducer(DeferredAction)
   let reducer = (state, action) =>
     switch action {
     | Tick =>
-      RestateReducer.UpdateWithDeferred(
+      Restate.UpdateWithDeferred(
         {elapsed: state.elapsed + 1},
         ScheduleNextTick
       )
-    | Reset => RestateReducer.Update({elapsed: 0})
+    | Reset => Restate.Update({elapsed: 0})
     }
-  let scheduler: (RestateReducer.self<state, action>, deferredAction) => option<unit=>unit> = 
+  let scheduler: (Restate.self<state, action, 'deferredAction>, deferredAction) => option<unit=>unit> = 
     (self, action) =>
         switch action {
         | ScheduleNextTick =>
@@ -67,7 +59,7 @@ module ReactRestate = {
         }
   @react.component
   let make = () => {
-    let (state, send, _defer) = RestateReducer.useReducerWithMapState(reducer, scheduler, () => {elapsed: 0})
+    let (state, send, _defer) = Restate.useReducerWithMapState(reducer, scheduler, () => {elapsed: 0})
     React.useEffect0(() => {
       send(Tick)
       None

examples/Counter_SideEffects.res

@@ -50,29 +50,21 @@ module ReactRestate = {
     type deferredAction =
       | LogIncrement
       | LogDecrement
-    module DeferredAction: Restate.HasDeferredAction with type t = deferredAction = {
-      type t = deferredAction
-      let variantId = action =>
-        switch action {
-        | LogIncrement => "LogIncrement"
-        | LogDecrement => "LogDecrement"
-      }
-    }
-    module RestateReducer = Restate.MakeReducer(DeferredAction)
+
     let reducer = (state, action) => 
      switch action {
        | Increment =>
-         RestateReducer.UpdateWithDeferred(
+         Restate.UpdateWithDeferred(
            state + 1,
            LogIncrement,
          )
        | Decrement =>
-         RestateReducer.UpdateWithDeferred(
+         Restate.UpdateWithDeferred(
            state - 1,
            LogDecrement,
          )
        }
-    let scheduler: (RestateReducer.self<state, action>, deferredAction) => option<unit=>unit> = 
+    let scheduler: (Restate.self<state, action, deferredAction>, deferredAction) => option<unit=>unit> = 
       (self, deferredAction) =>
         switch deferredAction {
         | LogIncrement =>
@@ -86,7 +78,7 @@ module ReactRestate = {
         }
     @react.component
     let make = () => {
-      let (state, send, _defer) = RestateReducer.useReducer(reducer, scheduler, 0)
+      let (state, send, _defer) = Restate.useReducer(reducer, scheduler, 0)
       <div>
         {state->React.int}
         <button onClick={_ => send(Decrement)}> {"-"->React.string} </button>

src/Internal_Iterator.res

@@ -0,0 +1,20 @@
+type t<'a>
+
+type value<'a> = {
+  done: bool,
+  value: option<'a>,
+}
+
+@send external next: t<'a> => value<'a> = "next"
+external toArray: t<'a> => array<'a> = "Array.from"
+external toArrayWithMapper: (t<'a>, 'a => 'b) => array<'b> = "Array.from"
+
+let forEach = (iterator, f) => {
+  let iteratorDone = ref(false)
+
+  while !iteratorDone.contents {
+    let {done, value} = iterator->next
+    f(value)
+    iteratorDone := done
+  }
+}

src/Internal_Map.res

@@ -0,0 +1,23 @@
+// Polyfill for Map taken from RescriptCore
+// Ref. https://github.com/rescript-association/rescript-core/blob/main/src/Core__Map.res
+
+type t<'k, 'v> = Js.Map.t<'k, 'v>
+
+@new external make: unit => t<'k, 'v> = "Map"
+@new external fromArray: array<('k, 'v)> => t<'k, 'v> = "Map"
+
+@get external size: t<'k, 'v> => int = "size"
+
+@send external clear: t<'k, 'v> => unit = "clear"
+
+@send external forEach: (t<'k, 'v>, 'v => unit) => unit = "forEach"
+@send external forEachWithKey: (t<'k, 'v>, ('v, 'k) => unit) => unit = "forEach"
+
+@send external get: (t<'k, 'v>, 'k) => option<'v> = "get"
+@send external has: (t<'k, 'v>, 'k) => bool = "has"
+@send external set: (t<'k, 'v>, 'k, 'v) => unit = "set"
+@send external delete: (t<'k, 'v>, 'k) => bool = "delete"
+
+@send external keys: t<'k, 'v> => Internal_Iterator.t<'k> = "keys"
+@send external values: t<'k, 'v> => Internal_Iterator.t<'v> = "values"
+@send external entries: t<'k, 'v> => Internal_Iterator.t<('k, 'v)> = "entries"