Skip to content
A lightweight framework to build pluggable and extendable redux/react application
TypeScript JavaScript HTML Dockerfile
Branch: master
Clone or download

Latest commit

Fetching latest commit…
Cannot retrieve the latest commit at this time.

Files

Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
__test__
example Use react-redux@7.x in examples Nov 17, 2019
src
.dockerignore
.gitignore
.npmignore
.travis.yml
CHANGELOG.md
Dockerfile
LICENSE.md
README.md
jest.config.js
package.json
reapex.plugin.js
server.js
setupTests.ts
tsconfig.json
tslint.json
webpack.config.js
yarn.lock update version of immutable-state-creator Mar 11, 2020

README.md

Reapex

Reapex is a lightweight "framework" written in TypeScript to build pluggable and extendable redux(react) application

Reapex is designed in a way that modules have a clear boundary with each other. It provides strong-typed everything out of the box.

Reapex supports plugins which make it easy to share reusable codes. For example, sharing module among projects or publishing to npm and share with the public. Such as reapex-plugin-dataloader

Built with the love of TypeScript

Reapex is written with TypeScript and it provides strong-typed state, selectors, actions.

Features

  • Reapex creates actions/action types for you, it eliminates redux boilerplate which makes it easy to maintain
  • Reapex loads modules dynamically, sagas/reducers are registered dynamically which makes code-splitting easy
  • Plugin support, create reusable and shareable code easily
  • Lightweight, easy to integrate with existing react/redux/redux-sagas application

Examples

  1. Counter: A legendary Counter example
  2. Login Form: Side effects handling with the demo of API call

Getting started with a simple Counter example

npm i reapex --save

Install peer dependencies

npm i react react-dom redux react-redux redux-saga --save

1. Initialize the application

import { App } from 'reapex'

const app = new App()

2. Create a model(the shape of the state)

const counter = app.model('Counter', { total: 0 })

3. Defined the mutations: how you want the state to be mutated

Mutation combines action types and reducer, and it returns action creators

const [mutations] = counter.mutations({
  increase: (t: number) => s => s.set('total', s.total + t),
  decrease: () => s => s.set('total', s.total - 1),
})

The function: (t: number) => s => s.set('total', s.total + t), t: number will be the input parameter of the action creator. s is a typed immutable Record<{total: number}>. By running the code above you will get an action creator map as:

{
  increase: (t: number) => ({ type: 'Counter/increase',  payload: [t] })
  decrease: () => ({ type: 'Counter/decrease' })
}

4. Connect it with Component

react-redux users should be very familiar with the following codes, it is a typical react-redux container, but with action creators and selectors which automatically created by reapex.

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

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

Note: counter.state.get('total') provides the selector to the total

5. Render it!

import React from 'react'
import { render } from 'react-dom'
import { Provider } from 'react-redux'

const store = app.createStore()

render(
  <Provider store={store}>
    <Counter />
  </Provider>,
  document.getElementById('root')
)
You can’t perform that action at this time.