18
62%
MIT
@lxsmnsyc/re-scoped-model
1.1.1
Scoped Model pattern in ReasonReact (but with Hooks)
librarystate managementreact
homepagerepositorynpmissuesdocumentation

@lxsmnsyc/re-scoped-model

Scoped Model pattern in React (but with Hooks), a pure ReasonML implementation of react-scoped-model

NPM JavaScript Style Guide

Install

npm install --save @lxsmnsyc/re-scoped-model
yarn add @lxsmnsyc/re-scoped-model

bsconfig.json

  "bs-dependencies": [
    "@lxsmnsyc/re-scoped-model"
  ],

Usage

Creating a model

Models are created by using a hook function that is always called whenever its Provider renders, and must return an object that represents the models' state:

  • RE
  • ML 
module Counter = {
  type props = int;

  type t = {
    decrement: unit => unit,
    increment: unit => unit,
    count: int,
  };

  let call = (props) => {
    let (count, setCount) = React.useState(() => props);

    let decrement = React.useCallback0(() => {
      setCount((current) => current - 1);
    });
    let increment = React.useCallback0(() => {
      setCount((current) => current + 1);
    });

    {
      count,
      decrement,
      increment,
    };
  };

  let displayName = "Counter";

  let shouldUpdate = (prev, next) => {
    prev == next;
  };
};

module CounterModel = ScopedModel.Make(Counter);
module Counter =
  struct
    type props = int
    type t = {
      decrement: unit -> unit;
      increment: unit -> unit;
      count: int;}
    let call props =
      let (count,setCount) = React.useState (fun ()  -> props) in
      let decrement =
        React.useCallback0
          (fun ()  -> setCount (fun current  -> current - 1)) in
      let increment =
        React.useCallback0
          (fun ()  -> setCount (fun current  -> current + 1)) in
      { count; decrement; increment }
    let displayName = "Counter"
    let shouldUpdate prev next = prev = next
  end
module CounterModel = ScopedModel.Make(Counter)

Adding to your component tree

To add the Model to your component tree, simply use the Provider component property:

  • RE
  • ML 
module App {
  [@react.component]
  let make = () => {
    <CounterModel.Provider props=0>
      <CounterModel.Provider props=100>
        <Count />
        <Increment />
        <Decrement />
      </CounterModel.Provider>
        <Count />
        <Increment />
        <Decrement />
    </CounterModel.Provider>
  };
}
module App =
  struct
    let make () =
      ((CounterModel.Provider.createElement ~props:0
          ~children:[((CounterModel.Provider.createElement ~props:100
                         ~children:[((Count.createElement ~children:[] ())
                                   [@JSX ]);
                                   ((Increment.createElement ~children:[] ())
                                   [@JSX ]);
                                   ((Decrement.createElement ~children:[] ())
                                   [@JSX ])] ())[@JSX ]);
                    ((Count.createElement ~children:[] ())[@JSX ]);
                    ((Increment.createElement ~children:[] ())[@JSX ]);
                    ((Decrement.createElement ~children:[] ())[@JSX ])] ())
      [@JSX ])[@@react.component ]
  end

useSelector Hook

To access our model's state, we can use the useSelector hook which accepts the model's reference and a function that receives the current model state, and returns a new value that is derived from the given state. This allows fine-grained and reasonable re-render for the listening component, as the component will only re-render if the transformed value changes every time the model updates. A third optional argument can be provided which accepts a function that compares the previously transformed state from the previous render and the newly transformed state.

For example, in our Count component, we only select the count field of our model record.

  • RE
  • ML 
module Count {
  [@react.component]
  let make = () => {
    let count = ScopedModel.useSelector(Counter, state => state.count, None);

    Js.log("Count");

    <p>{ ReasonReact.string(string_of_int(count)) }</p>;
  }
}
module Count =
  struct
    let make () =
      let count =
        ScopedModel.useSelector Counter (fun state  -> state.count) None in
      Js.log "Count";
      ((p ~children:[ReasonReact.string (string_of_int count)] ())[@JSX ])
      [@@react.component ]
  end
  • RE
  • ML 
module Increment {
  [@react.component]
  let make = () => {
    let increment = ScopedModel.useSelector(Counter, state => state.increment, None);

    Js.log("Increment");

    <button onClick={_ => increment()}>
      { ReasonReact.string("Increment") }
    </button>;
  }
}
3731: <UNKNOWN SYNTAX ERROR>
  • RE
  • ML 
module Decrement {
  [@react.component]
  let make = () => {
    let decrement = ScopedModel.useSelector(Counter, state => state.decrement, None);

    Js.log("Decrement");

    <button onClick={_ => decrement()}>
      { ReasonReact.string("Decrement") }
    </button>;
  }
}
3731: <UNKNOWN SYNTAX ERROR>
  • RE
  • ML 
module IncDec {
  [@react.component]
  let make = () => {
    let (increment, decrement) = Counter.useSelector(state => (
      state.increment,
      state.decrement,
    ), true);

    Js.log("IncDec");

    <React.Fragment>
      <button onClick={_ => increment()}>
        { ReasonReact.string("Increment") }
      </button>
      <button onClick={_ => decrement()}>
        { ReasonReact.string("Decrement") }
      </button>
    </React.Fragment>
  };
}
3731: <UNKNOWN SYNTAX ERROR>

Other hooks

There are 3 other hooks:

  • useValue: Consumes the model's current state and updates when the model's state updates.
  • useValueOnce: Consumes the model's current state once.
  • useSelectorOnce: Similar to useSelector, consumes and transforms the model's current state once.

Hook Factories

There are 4 built-in functions that are higher-order hooks. These functions are beneficial for stabilizing functional references (e.g. selector functions) to prevent recomputation of internal side effects.

  • createValue
  • createValueOnce
  • createSelector
  • createSelectorOnce

Model Factories

  • MakeNullary - a model with unit props, stabilizing the model from further recomputation whenever the Provider updates props or children.
  • MakeState - a kind of nullary model whose state is that of the React.useState.
  • RE
  • ML 
module Count = MakeState({
  type state = int;

  let initialState = () => 0;

  let displayName = "Count";
});
module Count =
  MakeState(struct
              type state = int
              let initialState () = 0
              let displayName = "Count"
            end)
  • MakeReducer - a kind of nullary model whose state is that of the React.useReducer.
  • RE
  • ML 
module Count = MakeReducer({
  type state = int;
  
  type action = 
    | Increment
    | Decrement;

  let initialState = () => 0;

  let reducer = (state, action) => {
    switch (action) {
      | Increment => state + 1;
      | Decrement => state - 1;
    }
  };

  let displayName = "Count";
});
module Count =
  MakeReducer(struct
                type state = int
                type action =
                  | Increment
                  | Decrement
                let initialState () = 0
                let reducer state action =
                  match action with
                  | Increment  -> state + 1
                  | Decrement  -> state - 1
                let displayName = "Count"
              end)
  • MakePropSelector- a kind of model whose props and state are the same.

License

MIT © lxsmnsyc

Project

Made with

Reason