Skip to content

Get Started

Simple Counter example with Reapex.

Installation

Installing Reapex and peer dependencies. If you add Reapex to an existing React application, you may already have all of them in your existing application.

yarn add reapexyarn add react react-dom redux react-redux redux-saga immutable

Create a Model

A model is simply a slice of redux global state, Reapex creates an Immutable Record from the initialValue. Think it as the inital state of a reducer.


import { App } from 'reapex'

export const app = new App()
const CounterModel = app.model('Counter', { total: 50 })

Create Mutations

The mutations describes how the model data will be updated.

The mutations function accepts an object as the first parameter which key describe the operation and value is a function that describes the mutation input and output. This is similar to the reducer function.


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

Note: typescript will infer the type of initialState and create the a strong-typed immutable Record with it. In this case, the state we used here will be Record<{total: number}>.

The return value of mutations funtion is a tuple: [actionCreators, actionTypes], the first value in the tuple is action creators. The second value is action types.

With Reapex, there will be no Redux boilerplates of action creators and action types. You will get them from Reapex and they are strong-typed with TS out of box.

Connect with Component

Reapex only helps you to create the store & state. Connecting with components is just like any others React & Redux applications.


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

Checkout the example

Run and edit the live example at codesandbox.io.

Want to learn more?

Check out the Reapex documentation and learn all about the API.