Show both internal and shared state managment in example.

examples/with-reasonml/components/Context.re

@@ -0,0 +1,27 @@
+module type Config = {
+  type context;
+  let defaultValue: context;
+};
+
+module Make = (Config: Config) => {
+  let x = React.createContext(Config.defaultValue);
+
+  module Provider = {
+    let make = x->React.Context.provider;
+
+    [@bs.obj]
+    external makeProps:
+      (
+        ~value: Config.context,
+        ~children: React.element,
+        ~key: string=?,
+        unit
+      ) =>
+      {
+        .
+        "value": Config.context,
+        "children": React.element,
+      } =
+      "";
+  };
+};

examples/with-reasonml/components/CountConsumer.re

@@ -0,0 +1,13 @@
+type reducer = (CountContext.state, CountContext.action => unit);
+
+[@react.component]
+let make = () => {
+  let ({count}, dispatch): reducer = React.useContext(CountContext.x);
+
+  <div>
+    <div> {j|This is the count: $count|j}->React.string </div>
+    <button onClick={_e => dispatch(CountContext.Increment)}>
+      "Increment count"->React.string
+    </button>
+  </div>;
+};

examples/with-reasonml/components/CountContext.re

@@ -0,0 +1,21 @@
+type state = {count: int};
+type action =
+  | Increment;
+let init = {count: 0};
+let reducer = (state, action) => {
+  switch (action) {
+  | Increment => {count: state.count + 1}
+  };
+};
+
+type t = (state, action => unit);
+
+include Context.Make({
+  type context = t;
+  let defaultValue = (
+    init,
+    _ => {
+      ();
+    },
+  );
+});

examples/with-reasonml/components/CountProvider.re

@@ -0,0 +1,6 @@
+[@react.component]
+let make = (~children) => {
+  let reducer = React.useReducer(CountContext.reducer, CountContext.init);
+
+  <CountContext.Provider value=reducer> children </CountContext.Provider>;
+};

examples/with-reasonml/components/Counter.re

@@ -1,22 +1,38 @@
-let count = ref(0);
+/*
+    This is the set of action messages which are produced by this component.
+    * Add updates the components internal state.
+ */
+type action =
+  | Add;
+
+/*
+   This is the components internal state representation. This state object
+   is unique to each instance of the component.
+ */
+type state = {count: int};
+
+let counterReducer = (state, action) =>
+  switch (action) {
+  | Add => {count: state.count + 1}
+  };
 
 [@react.component]
 let make = () => {
-  let (_state, dispatch) = React.useReducer(
-    (_, _) => Js.Obj.empty(),
-    Js.Obj.empty()
-  );
+  let (state, dispatch) = React.useReducer(counterReducer, {count: 0});
+  let (globalState, globalDispatch) = GlobalCount.useGlobalCount();
 
-  let countMsg = "Count: " ++ string_of_int(count^);
-
-  let add = () => {
-    count := count^ + 1;
-    dispatch();
-  };
+  let countMsg = "Count: " ++ string_of_int(state.count);
+  let persistentCountMsg = "Persistent Count " ++ string_of_int(globalState);
 
   <div>
     <p> {ReasonReact.string(countMsg)} </p>
-    <button onClick={_ => add()}> {React.string("Add")} </button>
+    <button onClick={_ => dispatch(Add)}> {React.string("Add")} </button>
+    <p> {ReasonReact.string(persistentCountMsg)} </p>
+    <button onClick={_ => globalDispatch(GlobalCount.Increment)}>
+      {React.string("Add")}
+    </button>
+    <CountConsumer />
+    <CountConsumer />
   </div>;
 };
 

examples/with-reasonml/components/GlobalCount.re

@@ -0,0 +1,27 @@
+/*
+    ## Global Count
+    This captures the count globally so that it will be persisted across
+    the `Index` and `About` pages.  This replicates the functionality
+    of the shared-modules example.
+ */
+type t = ref(int);
+
+type action =
+  | Increment;
+
+let current = ref(0);
+
+let increment = () => {
+  current := current^ + 1;
+  current;
+};
+
+let reducer = (_state, action) => {
+  switch(action) {
+  | Increment =>
+    let updated = increment();
+    updated^
+  }
+};
+
+let useGlobalCount = () => React.useReducer(reducer, current^);

examples/with-reasonml/pages/_app.js

@@ -0,0 +1,28 @@
+import App, { Container } from 'next/app'
+import React from 'react'
+import { make as CountProvider } from '../components/CountProvider.bs'
+
+class MyApp extends App {
+  static async getInitialProps({ Component, router, ctx }) {
+    let pageProps = {}
+
+    if (Component.getInitialProps) {
+      pageProps = await Component.getInitialProps(ctx)
+    }
+
+    return { pageProps }
+  }
+
+  render() {
+    const { Component, pageProps, store } = this.props
+    return (
+      <Container>
+        <CountProvider>
+          <Component {...pageProps} />
+        </CountProvider>
+      </Container>
+    )
+  }
+}
+
+export default MyApp