Samples for global state like in Elm in Rescript and React

1

I know functional programming and written production software in Ocaml, F# and ELM. I have no previous experience of React and I do not understand how it works internally. I have experience from other JS frameworks and I understand how Elm works…

I have got my ReasonML samples up and running and everything is fine.

I am looking for samples where I have a global state in a well-organized manner. To me the whole idea of local state per component is really strange. I can accept a local state for like input fields etc, but that is more like temp state while editing.

1 Like
2

Do you have a specific example of a piece of global state? Might be easier to give an example with a concrete example.

3

The ReScript-React docs have a note that you need to first understand how React works (at least on the surface), before you can be comfortable with ReScript-React. I really recommend working through the React guide, as it will really give you a good feel for how applications should be put together. Especially pay attention to the chapter on Lifting State Up, which deals with sharing state across components.

4

You are hitting the nail on the head here. It’s the primary difference between something like React and the Elm style. In Elm, the state is global, whereas you can have locally defined state in React components. In practice, you often lift state upward in React, so you end up sitting with a “global” state of sorts, and then you pass down, much like you would in Elm.

Some of the state you might want to keep local, you’ve already identified: input data. For some components, it turns out they have an isolated state, which can be run independently of the global state. So rather than having one single state machine driving your application, you have many small state machines driving your application. I have some Erlang experience, and it’s much like that model: processes have their own state, and you communicate by messaging.

So the view is that you have a set of small state machines comprising your system, and because components can be mounted/unmounted, this set is “dynamic” over the course of the application.

Going further, you have ways to “globalize” state in the react component tree which circumvents the tree:

  • Context is one example.
  • Another useful one is recoil, which implements a subset of the OCaml incremental library. This correspond to ETS tables in Erlang, for instance, which is an implementation of Tuple spaces (Linda, 1986).

All in all, it makes state manipulation in Elm quite explicit, whereas in React state manipulation is component-local and thus more implicit.

3 Likes
5

Thank you for the pointers, and now I understand how to do it. I found a good example at https://dusty.phillips.codes/2021/02/09/actions-and-reducers-in-rescript/ which combined global application wide state with local state for input widgets and similar. The application wide state is really similar to ELM.