Reapex

Build pluggable and extendable React application with Reapex

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, total: state.total + 1}),
  decrease: () => state => ({...state, 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
)

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

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

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.