Reapex

Build pluggable and extendable React application with Reapex

React Web

Features

TS

TypeScript

Getting strongly typed state, selectors, actions out of the box.

</>

DX

No Redux boilerplate. No action creators, no action type constants, less maintenance headache.

Light Weight

3.5 KB gzipped. Can be easily adopted to existing React & Redux applications. Progressively migrating to Reapex.

Dynamic Loading

Built with code splitting in mind makes a clear boundary between modules.

Reusability

Supports plugins. Create reusable plugins and share with others.

Steps to use Reapex

Reapex is written with TypeScript and it offers strongly typed state, selectors, actions. It provides a clean way to create Redux state with NO Redux boilerplate.

Create Model & Mutations


import { App } from 'reapex'

const app = new App()
const store = app.createStore()

const CounterModel = app.model('Counter', { total: 50 })
const [mutations] = CounterModel.mutations({
  increase: () => state => state.set('total', state.total + 1),
  decrease: () => state => state.set('total', state.total - 1),
})

Connect with Component


import React from 'react'
import { useDispatch, useSelector } from 'react-redux'

const CounterComponent = () => {
  const total = useSelector(CounterModel.selectors.total)
  const dispatch = useDispatch()
  return (
    <>
      <button onClick={() => dispatch(mutations.decrease())}>-</button>
      {total}
      <button onClick={() => dispatch(mutations.increase())}>+</button>
    </>
  )
}

Render it!


import { Provider } from 'react-redux'

const store = app.createStore()
const rootElement = document.getElementById('root')

render(
  <Provider store={store}>
    <CounterComponent />
  </Provider>,
  rootElement
)

Find it useful and interesting?

Reapex is designed in a way that modules have a clear boundary with each other, it provides a modularized way of creating React application.