Implement useReducerWithMapState

Author: mirko-plowtech

examples/BasicUsage.res

@@ -1,9 +1,6 @@
-
-
 module ReactUpdate = {
   type action = Tick | Reset
   type state = {elapsed: int}
-
   @react.component
   let make = () => {
     let (state, send) = ReactUpdate.useReducerWithMapState(
@@ -14,6 +11,7 @@ module ReactUpdate = {
             {elapsed: state.elapsed + 1},
             ({send}) => {
               let timeoutId = Js.Global.setTimeout(() => send(Tick), 1_000)
+              Js.Console.log2("schedule next tick: ", timeoutId)
               Some(() => {
                 Js.Console.log2("cleanup: ", timeoutId)
                 Js.Global.clearTimeout(timeoutId)
@@ -38,31 +36,45 @@ module ReactUpdate = {
 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(
+        {elapsed: state.elapsed + 1},
+        ScheduleNextTick
+      )
+    | Reset => RestateReducer.Update({elapsed: 0})
+    }
+  let scheduler: (RestateReducer.self<state, action>, deferredAction) => option<unit=>unit> = 
+    (self, action) =>
+        switch action {
+        | ScheduleNextTick =>
+          let timeoutId = Js.Global.setTimeout(() => self.send(Tick), 1_000)
+          Js.Console.log2("schedule next tick: ", timeoutId)
+          Some(() => {
+            Js.Console.log2("cleanup: ", timeoutId)
+            Js.Global.clearTimeout(timeoutId)
+          })
+        }
   @react.component
   let make = () => {
-    React.null
-    // let (state, send) = Restate.useReducerWithMapState(
-    //   (state, action) =>
-    //     switch action {
-    //     | Tick =>
-    //       UpdateWithSideEffects(
-    //         {elapsed: state.elapsed + 1},
-    //         ({send}) => {
-    //           let timeoutId = Js.Global.setTimeout(() => send(Tick), 1_000)
-    //           Some(() => Js.Global.clearTimeout(timeoutId))
-    //         },
-    //       )
-    //     | Reset => Update({elapsed: 0})
-    //     },
-    //   () => {elapsed: 0},
-    // )
-    // React.useEffect0(() => {
-    //   send(Tick)
-    //   None
-    // })
-    // <div>
-    //   {state.elapsed->Js.String.make->React.string}
-    //   <button onClick={_ => send(Reset)}> {"Reset"->React.string} </button>
-    // </div>
+    let (state, send, _defer) = RestateReducer.useReducerWithMapState(reducer, scheduler, () => {elapsed: 0})
+    React.useEffect0(() => {
+      send(Tick)
+      None
+    })
+    <div>
+      {state.elapsed->Js.String.make->React.string}
+      <button onClick={_ => send(Reset)}> {"Reset"->React.string} </button>
+    </div>
   }
 }

src/Restate.res

@@ -132,12 +132,67 @@ module MakeReducer = (DeferredAction: HasDeferredAction) => {
     // This way, we hide implementation (unsafe) tricks.
     (userState, send, defer)
   }
-}
 
-// TODO: Implement this for Restate
-// ReactUpdate.useReducerWithMapState (reducer<'state, 'action>, () => 'state) => ('state, dispatch<'action>)
-// React.useReducerWithMapState(
-//   ('state, 'action) => 'state,
-//   'initialState,
-//   'initialState => 'state,
-// ) => ('state, 'action => unit)
+  let useReducerWithMapState = (
+    reducer: reducer<'state, 'action>, // The reducer provided by the user
+    scheduler: scheduler<'state, 'action>, // The scheduler provided by the user
+    createInitialState: () => 'state, // A function to map the initial state
+  ) => {
+    let cleanupFnsRef: React.ref<Belt.Map.String.t<option<unit => unit>>> = React.useRef(Belt.Map.String.empty)  
+    let ({userState, deferredActionsQueue}, internalDispatch) = React.useReducerWithMapState(
+      ({userState, deferredActionsQueue} as internalState, internalAction) =>
+        switch internalAction {
+        | WiredAction(action) => 
+          switch reducer(userState, action) {
+          | NoUpdate => internalState
+          | Update(state) => {...internalState, userState: state}
+          | UpdateWithDeferred(state, deferredAction) => {
+              userState: state,
+              deferredActionsQueue: Belt.List.concat(deferredActionsQueue, list{deferredAction}),
+            }
+          | Deferred(deferredAction) => {
+              ...internalState,
+              deferredActionsQueue: Belt.List.concat(deferredActionsQueue, list{deferredAction}),
+            }
+          }
+        | PushDeferred(deferredAction) => {
+            ...internalState,
+            deferredActionsQueue: Belt.List.concat(deferredActionsQueue, list{deferredAction}),
+          }
+        | PopDeferred(tailDeferredActions) => {
+            ...internalState,
+            deferredActionsQueue: tailDeferredActions,
+          }
+        }
+      , (), initialState =>  {userState: createInitialState(initialState), deferredActionsQueue: list{}}
+    )
+    let defer: schedule = deferredAction => internalDispatch(PushDeferred(deferredAction))
+    let send: dispatch<'action> = action => internalDispatch(WiredAction(action)) 
+    React.useEffect1(() => {
+      switch (deferredActionsQueue) {
+      | list{deferredAction, ...queueTail} => 
+        cleanupFnsRef.current
+          ->Belt.Map.String.get(DeferredAction.variantId(deferredAction))
+          ->Belt.Option.map(mPrevCleanupFn => mPrevCleanupFn->Belt.Option.map(prevCleanupFn => prevCleanupFn()))
+          ->ignore
+        let mNewCleanupFn = scheduler({state: userState, send, defer}, deferredAction)
+        cleanupFnsRef.current = cleanupFnsRef.current->Belt.Map.String.set(DeferredAction.variantId(deferredAction), mNewCleanupFn)
+        internalDispatch(PopDeferred(queueTail)) 
+      | list{} => ()
+      }
+      None
+    }, [deferredActionsQueue])
+    React.useEffect0(() => {
+      Some(() => {
+        cleanupFnsRef.current
+        ->Belt.Map.String.valuesToArray
+        ->Belt.Array.forEach(
+          mCleanupFn => mCleanupFn->Belt.Option.forEach(cleanupFn => cleanupFn())
+        )
+        }
+      )
+      }
+    )
+    (userState, send, defer)
+  }
+}