Wondering what’s next for npm?Check out our public roadmap! »

    rescript-react-update

    4.0.0 • Public • Published

    rescript-react-update

    useReducer with updates and side effects!

    Installation

    $ yarn add rescript-react-update

    or

    $ npm install --save rescript-react-update

    Then add rescript-react-update to your bsconfig.json bs-dependencies field.

    ReactUpdate.useReducer

    type state = int;
    
    type action =
      | Increment
      | Decrement;
    
    [@react.component]
    let make = () => {
      let (state, send) =
        ReactUpdate.useReducer((state, action) =>
          switch (action) {
          | Increment => Update(state + 1)
          | Decrement => Update(state - 1)
          },
          0
        );
      <div>
        {state->React.int}
        <button onClick={_ => send(Decrement)}> {"-"->React.string} </button>
        <button onClick={_ => send(Increment)}> {"+"->React.string} </button>
      </div>;
    };

    Lazy initialisation

    ReactUpdate.useReducerWithMapState

    If you'd rather initialize state lazily (if there's so computation you don't want executed at every render for instance), use useReducerWithMapState where the first argument is a function taking unit and returning the initial state.

    type state = int;
    
    type action =
      | Increment
      | Decrement;
    
    [@react.component]
    let make = () => {
      let (state, send) =
        ReactUpdate.useReducerWithMapState(
          (state, action) =>
            switch (action) {
            | Increment => Update(state + 1)
            | Decrement => Update(state + 1)
            },
            () => 0
        );
      <div>
        {state->React.int}
        <button onClick={_ => send(Decrement)}> {"-"->React.string} </button>
        <button onClick={_ => send(Increment)}> {"+"->React.string} </button>
      </div>;
    };

    Cancelling a side effect

    The callback you pass to SideEffects & UpdateWithSideEffect returns an option(unit => unit), which is the cancellation function.

    // doesn't cancel
    SideEffects(({send}) => {
      Js.log(1);
      None
    });
    // cancels
    SideEffects(({send}) => {
      let request = Request.make();
      request->Future.get(payload => send(Receive(payload)))
      Some(() => {
        Request.cancel(request)
      })
    });

    If you want to copy/paste old reducers that don't support cancellation, you can use ReactUpdateLegacy instead in place of ReactUpdate. Its SideEffects and UpdateWithSideEffects functions accept functions that return unit.

    Install

    npm i rescript-react-update

    DownloadsWeekly Downloads

    511

    Version

    4.0.0

    License

    MIT

    Unpacked Size

    14.3 kB

    Total Files

    17

    Last publish

    Collaborators

    • avatar