@fakenickels/reason-react-update
v1.0.1
Published
> useReducer with updates and side effects!
Downloads
7
Readme
reason-react-update
useReducer with updates and side effects!
Installation
$ yarn add reason-react-update
or
$ npm install --save reason-react-update
Then add reason-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(0, (action, state) =>
switch (action) {
| Increment => Update(state + 1)
| Decrement => Update(state - 1)
}
);
<div>
{state->Js.String.make->React.string}
<button onClick={_ => send(Decrement)}> "-"->React.string </button>
<button onClick={_ => send(Increment)}> "+"->React.string </button>
</div>;
};
Lazy initialisation
ReactUpdate.useReducer
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(
() => 0,
(action, state) =>
switch (action) {
| Increment => Update(state + 1)
| Decrement => Update(state + 1)
}
);
<div>
{state->Js.String.make->React.string}
<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
.