2 files changed, 74 insertions, 0 deletions
diff --git a/website/sandbox/nut-score/src/ReducerFromReactJSDocs/ReducerFromReactJSDocs.bs.js b/website/sandbox/nut-score/src/ReducerFromReactJSDocs/ReducerFromReactJSDocs.bs.js
new file mode 100644
index 000000000000..74322f4a8f45
--- /dev/null
+++ b/website/sandbox/nut-score/src/ReducerFromReactJSDocs/ReducerFromReactJSDocs.bs.js
@@ -0,0 +1,35 @@
+'use strict';
+
+var Curry = require("bs-platform/lib/js/curry.js");
+var React = require("react");
+
+var initialState = /* record */[/* count */0];
+
+function reducer(state, action) {
+  if (action) {
+    return /* record */[/* count */state[/* count */0] - 1 | 0];
+  } else {
+    return /* record */[/* count */state[/* count */0] + 1 | 0];
+  }
+}
+
+function ReducerFromReactJSDocs(Props) {
+  var match = React.useReducer(reducer, initialState);
+  var dispatch = match[1];
+  return React.createElement("div", undefined, React.createElement("div", undefined, "Count: ", String(match[0][/* count */0])), React.createElement("div", undefined, React.createElement("button", {
+                      onClick: (function (_event) {
+                          return Curry._1(dispatch, /* Decrement */1);
+                        })
+                    }, "-"), React.createElement("button", {
+                      onClick: (function (_event) {
+                          return Curry._1(dispatch, /* Increment */0);
+                        })
+                    }, "+")));
+}
+
+var make = ReducerFromReactJSDocs;
+
+exports.initialState = initialState;
+exports.reducer = reducer;
+exports.make = make;
+/* react Not a pure module */
diff --git a/website/sandbox/nut-score/src/ReducerFromReactJSDocs/ReducerFromReactJSDocs.re b/website/sandbox/nut-score/src/ReducerFromReactJSDocs/ReducerFromReactJSDocs.re
new file mode 100644
index 000000000000..ddc5f0994649
--- /dev/null
+++ b/website/sandbox/nut-score/src/ReducerFromReactJSDocs/ReducerFromReactJSDocs.re
@@ -0,0 +1,39 @@
+// This is the ReactJS documentation's useReducer example, directly ported over
+// https://reactjs.org/docs/hooks-reference.html#usereducer
+
+// Record and variant need explicit declarations.
+type state = {count: int};
+
+type action =
+  | Increment
+  | Decrement;
+
+let initialState = {count: 0};
+
+let reducer = (state, action) => {
+  switch (action) {
+  | Increment => {count: state.count + 1}
+  | Decrement => {count: state.count - 1}
+  };
+};
+
+[@react.component]
+let make = () => {
+  let (state, dispatch) = React.useReducer(reducer, initialState);
+
+  // We can use a fragment here, but we don't, because we want to style the counter
+  <div>
+    <div>
+      {React.string("Count: ")}
+      {React.string(string_of_int(state.count))}
+    </div>
+    <div>
+      <button onClick={_event => dispatch(Decrement)}>
+        {React.string("-")}
+      </button>
+      <button onClick={_event => dispatch(Increment)}>
+        {React.string("+")}
+      </button>
+    </div>
+  </div>;
+};