React store with hooks.








!React
``/ __/ __/
___ __
/ _ \___ ___ _____/ /_
/ , _/ -_) / _
____ /_/|_|\__/ \_,_/\__/\__/
/ __/ / /____ _______
_\ \ / __/ _ \ / __/ -_)
/___/ \__/\___/ /_/ \__/
``
Flexible and efficient React Store with hooks.
- Supports all react hooks. Writing a store is just like writing a component.
- Simple but efficient, quite easy to learn.
- Use multiple stores to organize your data.
- Dependency injection based on React Context.
- Strongly typed with Typescript, also works well with JS.
`bash`
$ yarn add retoor
$ npm install reto --save

Every Store is a function similar to a custom hook. In the body of a Store function, you can use any react hooks, for example, useState, useEffect, useRef.
`jsx`
export function FooStore() {
const [x, setX] = useState(initial)
return {
x,
setX
}
}
Then, you can provide a store "instance" using Provider component.
`jsx
import {Provider} from 'reto'
`
By using the useStore hook, you can retrieve the store "instance" in components, and subscribe to its changes.
`jsx
import {useStore} from 'reto'
const App: FC = (props) => {
const fooStore = useStore(FooStore)
function changeStore() {
fooStore.setX(fooStore.x + 1)
}
return (
So when you click the "Change" button, the
setX function of fooStore is executed, thereby triggers the update of state x and the rerender of App` component. Everything is simple and straightforward.