项目作者: bloodyowl

项目描述 :
Zero-cost bindings to Facebook's Recoil library
高级语言: ReScript
项目地址: git://github.com/bloodyowl/rescript-recoil.git
创建时间: 2020-05-17T09:23:57Z
项目社区:https://github.com/bloodyowl/rescript-recoil

开源协议:MIT License

下载


rescript-recoil

Node.js CI

Zero-cost bindings to Facebook’s Recoil library

⚠️ These bindings are still in experimental stages, use with caution

Installation

Run the following command:

  1. $ yarn add recoil rescript-recoil

Then add rescript-recoil to your bsconfig.json‘s dependencies:

  1. {
  2. "bs-dependencies": [
  3. + "rescript-recoil"
  4. ]
  5. }

Usage

Atom

  1. let textState = Recoil.atom({
  2. key: "textState",
  3. default: "",
  4. })

Selector

A nice feature the OCaml type-system enables is the ability to differenciate Recoil values between the ones that can only read state with the ones that can write state. This way, you can’t use hooks with write capabilities with a read-only value.

With read only capabilities

  1. let textStateSize = Recoil.selector({
  2. key: "textStateSize",
  3. get: ({get}) => {
  4. let textState = get(textState)
  5. Js.String.length(textState)
  6. },
  7. })

With write capabilities

  1. let textStateSize = Recoil.selectorWithWrite({
  2. key: "textStateSize",
  3. get: ({get}) => {
  4. let textState = get(textState);
  5. Js.String.length(textState);
  6. },
  7. set: ({set}, newSize) => {
  8. let currentTextState = get(textState);
  9. set(textState, currentTextState->Js.String.slice(~from=0, ~to_=newSize));
  10. }
  11. });

Async

  1. let user = Recoil.asyncSelector({
  2. key: "user",
  3. get: ({get}) => {
  4. fetchUser(get(currentUserId))
  5. },
  6. })

Hooks

useRecoilState

  1. let (state, setState) = Recoil.useRecoilState(textState);
  2. state // read
  3. setState(textState => newTextState) // write

useRecoilValue

  1. let state = Recoil.useRecoilValue(textState)
  2. state // read

useSetRecoilState

  1. let setState = Recoil.useSetRecoilState(textState)
  2. setState(textState => newTextState) // write

useResetRecoilState

  1. let reset = Recoil.useResetRecoilState(textState)
  2. reset() // write

useRecoilCallback

  • Dependency free (reevaluates the callback at every render): useRecoilCallback(...)
  • Zero-dependency (never reevaluates the callback): useRecoilCallback0(...)
  • One-dependency (reevaluates when dep changes): useRecoilCallback1(..., [|dep|])
  • Multiple-dependencies: useRecoilCallback2(..., (dep1, dep2)) (goes from 2 to 5)
  1. let onClick = Recoil.useRecoilCallback(({snapshot: {getPromise}}, event) => {
  2. let _ = getPromise(myAtom)
  3. |> Js.Promise.then_(value => {
  4. Js.log(value)
  5. Js.Promise.resolve()
  6. })
  7. })
  8. <button onClick={onClick}>
  9. {"Click me"->React.string}
  10. </button>

useRecoilValueLoadable

  1. let loadable = Recoil.useRecoilValueLoadable(textState)
  2. Js.log(loadable->Recoil.Loadable.state)
  3. Js.log(loadable->Recoil.Loadable.getValue)

Examples

The Recoil Basic Tutorial has been made in ReasonReact: check the source!

You can run it using:

  1. $ yarn examples

and going to http://localhost:8000/TodoList.html

Memoization

  1. type t = {
  2. id: string,
  3. value: string,
  4. isCompleted: bool,
  5. }
  6. // For atoms
  7. let todoItemFamily = Recoil.atomFamily({
  8. key: "todo",
  9. default: param => {
  10. id: param,
  11. value: "",
  12. isCompleted: false,
  13. },
  14. })
  15. // For selectors
  16. let todoItemLengthFamily = Recoil.selectorFamily({
  17. key: "todo",
  18. // The `Fn` wrapper is needed here so that BuckleScript
  19. // outputs the correct value
  20. get: param => Fn(({get}) => {
  21. get(todoItemFamily(param)).value->Js.String2.length
  22. }),
  23. })

And use it within a React component:

  1. [@react.component]
  2. let make = (~todoId) => {
  3. let (todo, setTodo) = Recoil.useRecoilState(todoItemFamily(id))
  4. // ...
  5. <>
  6. {todo.value->React.string}
  7. </>
  8. }