https://github.com/sikanhe/reason-atomic
Dead simple shared state in Reason React with a redux-like interface.
https://github.com/sikanhe/reason-atomic
reason-react reasonml redux state-management
Last synced: about 6 hours ago
JSON representation
Dead simple shared state in Reason React with a redux-like interface.
- Host: GitHub
- URL: https://github.com/sikanhe/reason-atomic
- Owner: sikanhe
- License: mit
- Created: 2019-04-20T17:42:53.000Z (almost 7 years ago)
- Default Branch: master
- Last Pushed: 2019-04-20T20:40:27.000Z (almost 7 years ago)
- Last Synced: 2025-12-22T21:45:23.953Z (2 months ago)
- Topics: reason-react, reasonml, redux, state-management
- Language: OCaml
- Size: 7.81 KB
- Stars: 19
- Watchers: 0
- Forks: 2
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
- awesome-list - reason-atomic - like interface. | sikanhe | 19 | (OCaml)
README
# Atomic [](https://www.npmjs.com/package/reason-atomic)
Dead simple shared state in Reason React with a redux-like interface.
# Installation
```bash
yarn add reason-atomic
```
Then add `reason-atomic` to your `bs-dependencies` in `bsconfig.json`
```
{
...
"bs-dependencies": ["reason-atomic"]
}
```
# Usage
Configure your state by creating a module with `state`, `getInitialState`, `action`, and `reducer`.
```reason
module Config = {
type state = {count: int};
let getInitialState = () => {count: 0};
type action =
| Increment
| Decrement
| NoChange;
let reducer = state =>
fun
| Increment => {count: state.count + 1}
| Decrement => {count: state.count - 1}
| NoChange => state;
};
```
Create a new state module with the config
```reason
module AppState = Atomic.Make(Config);
// module AppState2 = Atomic.Make(Config);
// module AppState3 = Atomic.Make(Config);
// Create as many instances as you like..
```
Access the state as a hook, and dispatch actions
```reason
[@react.component]
let make = () => {
let state = AppState.useState();
{React.string("global count: " ++ string_of_int(state.count))}
AppState.dispatch(Increment)}> {React.string("+")}
AppState.dispatch(Decrement)}> {React.string("-")}
;
};
```
If you only care about a subset of the state, you can use `useMappedState`. This also means that
the component with the hook won't re-render unless the state it cares about changes - avoiding excessive re-rendering.
```reason
[@react.component]
let make = () => {
let count = AppState.useMappedState(state => state.count);
{React.string("global count: " ++ string_of_int(count))}
;
};
```
You can also use the render-props pattern to consume the state as well, using the `Consumer`
component and pass the `mapper` prop.
```reason
[@react.component]
let make = () => {
state.count}>
{count => React.string("global count: " ++ string_of_int(count))}
;
};
```