Global Store

Create a Doura sotre

store.ts

import { doura } from 'doura'

export default doura()

Provide the Doura Store to React

index.ts

import React from 'react'
import ReactDOM from 'react-dom/client'
import App from './App'
import store from './store'
import { DouraRoot } from 'react-doura'

// As of React 18
const root = ReactDOM.createRoot(document.getElementById('root'))

root.render(
  <DouraRoot store={store}>
    <App />
  </DouraRoot>
)

Create a model

models/count

import { defineModel } from 'doura'

export const countModel = defineModel({
  state: {
    count: 0,
  },
  actions: {
    inc() {
      this.count += 1
    },
  },
})

Bind your components

Now we can use the React Doura hooks to let React components interact with the Doura store.

componnets/Counter.tsx

import React from 'react'
import { useModel } from 'react-doura'
import { countModel } from './models/count'

export function Counter() {
  const { count, inc } = useModel('count', countModel)

  return (
    <div>
      <h1>Count: {count}</h1>
      <button onClick={inc}>inc</button>
    </div>
  )
}