diff --git a/examples/with-reasonml/components/Counter.re b/examples/with-reasonml/components/Counter.re index e30b4229552d3..436998c210a69 100644 --- a/examples/with-reasonml/components/Counter.re +++ b/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 countMsg = "Count: " ++ string_of_int(count^); + let (state, dispatch) = React.useReducer(counterReducer, { count: 0 }); + let (globalState, globalDispatch) = GlobalCount.useGlobalCount(); - let add = () => { - count := count^ + 1; - dispatch(); - }; + let countMsg = "Count: " ++ string_of_int(state.count); + let persistentCountMsg = "Persistent Count " ++ string_of_int(globalState);

{ReasonReact.string(countMsg)}

- + +

{ReasonReact.string(persistentCountMsg)}

+
; }; diff --git a/examples/with-reasonml/components/GlobalCount.re b/examples/with-reasonml/components/GlobalCount.re new file mode 100644 index 0000000000000..5afeb964eb488 --- /dev/null +++ b/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^);