Reto

             ___                  __ 
            / _ \___    ___ _____/ /_
           / , _/ -_)  / _ `/ __/ __/
   ____   /_/|_|\__/   \_,_/\__/\__/ 
  / __/  / /____     _______         
 _\ \   / __/ _ \   / __/ -_)        
/___/   \__/\___/  /_/  \__/         
                                     

Flexible and efficient React Store with hooks.

Features

• 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.

Docs

English | 中文

Install

$ yarn add reto
# or
$ npm install reto --save

Try It Online

A Simple Example

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.

export function FooStore() {
  const [x, setX] = useState(initial)
  return {
    x,
    setX
  }
}

Then, you can provide a store "instance" using Provider component.

import {Provider} from 'reto'

<Provider of={FooStore}>
  <App/>
</Provider>

By using the useStore hook, you can retrieve the store "instance" in components, and subscribe to its changes.

import {useStore} from 'reto'

const App: FC = (props) => {
  const fooStore = useStore(FooStore)
  
  function changeStore() {
    fooStore.setX(fooStore.x + 1)
  }
  return (
    <div>
      <button onClick={changeStore}>Change</button>
      {fooStore.x}
    </div>
  )
}

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.