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)}
+