https://github.com/octod/thestate
Global state for your react apps, made with Rescript
https://github.com/octod/thestate
Last synced: 10 months ago
JSON representation
Global state for your react apps, made with Rescript
- Host: GitHub
- URL: https://github.com/octod/thestate
- Owner: OctoD
- License: mit
- Created: 2021-08-12T14:21:15.000Z (almost 5 years ago)
- Default Branch: main
- Last Pushed: 2023-07-19T07:26:43.000Z (almost 3 years ago)
- Last Synced: 2025-06-16T18:06:55.640Z (about 1 year ago)
- Language: ReScript
- Size: 96.7 KB
- Stars: 9
- Watchers: 2
- Forks: 0
- Open Issues: 3
-
Metadata Files:
- Readme: README.md
- Funding: .github/FUNDING.yml
- License: LICENSE
Awesome Lists containing this project
README
Thestate
========
Yet another global state manager.
Yes, it's done with push/sub
Yes, it's simple
Yes, it's made with Rescript
Why chosing it?
- Simple, really simple
- It's made with Rescript! ❤️
- It's very tiny
- Has `.d.ts` files for your js/ts apps
- Built both for commonjs and es6 spec
## install
```bash
yarn add @octod/thestate
```
If you are a js/ts dev, it's done. If you are using rescript (and I recommend it!), add the dependency to your *bsconfig.json* file
```json
"bs-dependencies": [
"@octod/thestate"
]
```
## creating your first store (rescript)
You have four functions to know:
- make, creates a store
- getstate, returns a store's value
- mutation, registers a mutation and returns a mutating function
- listen, adds a listener to all mutations in a single store
```rescript
let store = 100->Thestate.make
let increment = store->Thestate.mutation((state, payload) => state + payload)
let unsubscribelistener = store->Thestate.listen(state => Js.Console.log(state))
increment(100) // logs 200
store->Thestate.getstate->Js.Console.log // logs 200
unsubscribelistener()
increment(100) // does not log anymore, we have unsubscribed before
```
## creating your first store (js/ts)
```ts
import * as thestate from 'thestate';
const store = thestate.make(100);
const increment = thestate.mutation(store, (state: number, payload: number) => state + payload);
const unsubscribelistener = thestate.listen(store, console.log);
increment(100) // logs 200
console.log(thestate.getstate(store)) // logs 200
unsubscribelistener()
increment(100) // does not log anymore, we have unsubscribed before
```
## using it with react (rescript)
```rescript
// create your store normally
let store = 100->Thestate.make
// maybe with some mutations is better
let increment = store->Thestate.mutation((state, payload) => state + payload)
module Increment = {
@react.component
let make = () => increment(1)}> {"increment"->React.string}
}
module Count = {
@react.component
let make = () => {
let count = store->Thestate.useState
{`current state is ${count->Belt.Int.toString}`->React.string}
}
}
module Counter = {
@react.component
let make = () => {
}
}
```
## using it with react (js/ts)
```tsx
import React, { useState, useEffect } from 'react';
import * as thestate from '@octod/thestate';
const store = thestate.make(100)
const increment = thestate.mutation(store, (a: number, b: number) => a + b);
const Increment = () => {
return (
increment(1)}>
increment
)
}
const Count = () => {
const count = thestate.useState(store)
return (
<>{`current state is ${count}`}>
)
}
const Counter = () => {
return (
)
}
```
## Contributions are really welcome
Any kind of contribution is really welcome, so don't be shy!