sobix

Rattus ORM – React Redux

React-redux data provider and helpers for Rattus ORM

Contents

1. ReactReduxDataProvider;
2. <RattusProvier /> component;
3. Hooks: useRattusContext, useRepository.

Installation

Use your favorite package manager. For example, yarn:

yarn add @rattus-orm/core @rattus-orm/react-redux @reduxjs/toolkit react-redux

Basic usage

import React from 'react'
import ReactDOM from 'react-dom/client'
import { RattusProvider } from "@rattus-orm/react-redux"
import App from './App.tsx'
import { store } from './store'

ReactDOM.createRoot(document.getElementById('root')!).render(
  <React.StrictMode>
    <RattusProvider store={store}>
      <App />
    </RattusProvider>
  </React.StrictMode>,
)

export class User extends Model {
    public static entity = 'user'
    
    @Uid()
    public id: string
    
    @Str()
    public email: string
}

import { useEffect } from 'react'
import { useRepository } from "@rattus-orm/react-redux";
import { User } from "./models/User.ts";

function App() {
  const { query, save } = useRepository(User)
  const user = query().where('id', '1').first()

  useEffect(() => {
    save({ id: '1', email: '[e-mail]' })
  }, [])

  if (!user) {
    return ''
  }

  return (
    <>
      <p>{ user.email }</p>
      <button type="button" onClick={() => save({ id: '1', email: '[e-mail]' })}>Update email</button>
    </>
  )
}

Documentation

For detailed docs please read documentation website.

Contributing

Contributions are welcome! Please read our Contributing Guide for details on our code of conduct, and the process for submitting pull requests.