rescript-redux v0.0.1

👋 rescript-redux

Zero-cost bindings of Redux and React-Redux for Rescript.

☂️ Adding dependencies

npm install rescript @rescript/react -D

npm install react react-dom redux react-redux -S

💫 Installation

npm install rescript-redux -D

✨ Adding bs-dependencies

{
  ...
  "bs-dependencies": [
+    "@rescript/react",
+    "rescript-redux"
  ],
  ...
+ "jsx": { "version": 3}
  ...
}

🚀 usage

createStore

type state = {
    message: string,
    count: int
}

type action = 
    | Send(string)
    | Add(int)
    | Mult(int)
    | Update(string, int)

let reducer = ({ message, count }, action) => {
    switch action {
    | Send(name) => {message: message ++ name,count}
    | Add(x) => {message, count: count + x}
    | Mult(x) => {message, count: count * x}
    | Update(message, count) => {message,count}
    }
}

let store = Redux.createStore(reducer, {message: "", count: 0})

🏆 Hook API

Provider

useDispatch

useSelector

useStore

module App = {
    open ReduxReact 
    open React
    @react.component
    let make = () => {
        let dispatch = useDispatch()
        let getDoubleCount = useSelector(({count}) => count * 2)
        let sayHello = useSelector(({message}) => message ++ "Hello")
        let store = useStore()
        let onClick = (_) => {
            dispatch(Add(1))
        }
        <>
            <h3>{store.getState().count->int}</h3>
            <h3>{store.getState().message->string}</h3>
            <h3>{getDoubleCount->int}</h3>
            <h3>{sayHello->string}</h3>
            <button onClick>{"plus 1"->string}</button>
        </>
    }
}

switch ReactDOM.querySelector("#root") {
| Some(rootElement) => {
    let root = ReactDOM.Client.createRoot(rootElement)
    ReactDOM.Client.Root.render(
        root,
        <ReduxReact.Provider store>
            <App />
        </ReduxReact.Provider> 
    )
  }
| None => ()
}