about summary refs log tree commit diff
path: root/nut-score/src/ReducerFromReactJSDocs/ReducerFromReactJSDocs.re
diff options
context:
space:
mode:
Diffstat (limited to 'nut-score/src/ReducerFromReactJSDocs/ReducerFromReactJSDocs.re')
-rw-r--r--nut-score/src/ReducerFromReactJSDocs/ReducerFromReactJSDocs.re39
1 files changed, 39 insertions, 0 deletions
diff --git a/nut-score/src/ReducerFromReactJSDocs/ReducerFromReactJSDocs.re b/nut-score/src/ReducerFromReactJSDocs/ReducerFromReactJSDocs.re
new file mode 100644
index 000000000000..ddc5f0994649
--- /dev/null
+++ b/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>;
+};