margaretkrutikova/reason-react-elmish

The Elm Architecture for reason-react

reason-react-elmish

The library implements the "model-update" part of the "model-view-update" elm architecture, leveraging React as the "view" part and implementing the missing part of state and effect management.

🚧 Not production ready (yet), but trying out is highly encouraged 🚧

Installation

Can be installed via:

npm install --save "https://github.com/MargaretKrutikova/reason-react-elmish"

and added to bsconfig.json:

"bs-dependencies": [
  "reason-react-elmish"
]

Peer dependencies are react, reason-react and bs-platform.

Example usage

First, define your types for message and model, implement the update function and effectful functions (if any).

// AppModel.re
type message =
  | FetchUsersRequest
  | FetchUsersSuccess(userApiResponse)
  | FetchUsersError;

type data =
  | NotAsked
  | Loading
  | Error
  | Success(userApiResponse);

type model = {data};

let fetchUsers = dispatch => {
  Js.Promise.(
    Caller.fetchUsers()
    |> then_(response => dispatch(FetchUsersSuccess(response)) |> resolve)
    |> catch(_ => dispatch(FetchUsersError) |> resolve)
  )
  |> ignore;
  None;
};

let update = (_, message) => {
  switch (message) {
  | FetchUsersRequest => ({data: Loading}, Some(fetchUsers))
  | FetchUsersSuccess(data) => ({data: Success(data)}, None)
  | FetchUsersError => ({data: Error}, None)
  };
};

let initModel = ({data: NotAsked}, None);

Setup your elmish store with all of the above and your initial model with initial effect (if any).

// AppStore.re
include Elmish.Make({
  type model = AppModel.model;
  type message = AppModel.message;

  let update = AppModel.update;
  let storeEnhancer = None;
  let initialModel = AppModel.initModel;
});

See example file ./examples/AppModel.re and ./examples/AppStore.re.

Then hook in your store into the react component tree somewhere at the root:

// Index.re
ReactDOMRe.renderToElementWithId(
  <AppStore.ElmishProvider> <Root /> </AppStore.ElmishProvider>,
  "root",
);

and use the hooks to get access to the model and dispatch in your components:

let selector = (model: AppModel.model) => model.data;

[@react.component]
let make = () => {
  let dispatch = AppStore.useDispatch();
  let result = AppStore.useSelector(selector);

  <div>
    <button onClick={_event => dispatch(FetchUsersRequest)}>
      {React.string("Fetch users")}
    </button>
  </div>;
};

Run examples

npm install
npm start
# in another tab
npm run watch:bs

reason-react-elmish's Issues

Are you accepting PRs in rescript?

First, thanks for writing this. I was really happy when I found it! I'm getting into ReasonReact for interop and react-friendliness reasons, but I miss the clear story on how effects are handled in Elm-land.

Anyway, to the topic of my issue: it seems like I've landed in the middle of something with the transition to rescript by some of the community. It looks like many packages are sort of waiting in limbo and not releasing updates.

For now, I've run the .re files in /src through the automated conversion to rescript and started to use those files in part of a new project. I've also been working on Cmd and Http modules, which wrap the option<effect<'message>>s which get passed into the update function, which makes it look even Elmish-er (and let's me separate myself from the underlying relative chaos of http in res vs elm).

Since I'm using this in a relatively large project, I may find bugs and would try to fix them. I would also be open to submitting the Cmd and Http modules I've been working on if they prove useful. Are you open to these PRs (in rescript), or would it be better for me to fork/just use the project in my own repo without forking?

Switch to subscriptions in effect manager

Support for subscriptions

Is there a way to fit in Elm-like subscriptions in a natural and graceful way?
See examples here: https://guide.elm-lang.org/effects/http.html