👋 rescript-redux
Zero-cost bindings of Redux and React-Redux for Rescript.
☂️ Adding dependencies
npm install rescript @rescript/react -Dnpm 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 => ()
}