Better development experience with Redux

Yulong Ruan — Thu, 12 Dec 2019 21:39:58 +0000

Introduction to Reapex

Reapex is a lightweight framework to build pluggable and extendable redux/react application.

Reapex offers:

Strong-typed state, selectors, actions out of the box.
Writing Redux code with NO action creators, NO action type constants, less maintenance headache.
Making code-splitting easier.
Support plugins, create reusable plugins and share them with others.

The Motivation

As a frontend developer who uses React & Redux extensively on a daily basis, I found I got tired of writing Redux boilerplates at some point, all those action creators, action types make me boring.

Every time when I got excited to develop a new feature, the boilerplate makes me down because I have to repeat those similar codes again and again. It's also a lot of headaches to maintain them in a large codebase.

There are libraries out there that can solve my problem partially, but they all missed something. Especially if I'd like to have everything strong-typed with TypeScript, for example, strong-typed state, selector and action.

I came up with the idea of writing something for myself, then Reapex was born. I introduced it to my friends and the people on my team. They like the idea and start to use it and I get positive feedback from them. Now Reapex is used in an enterprise application at PROD.

So I'd like to introduce it to more people and I wish it could help people who have a similar problem.

Get started

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.

# 1. Install reapex
yarn add reapex

# 2. Install peer dependencies if you don't have them
yarn add react react-dom redux react-redux redux-saga immutable

1. Create a model

A model can be simply a slice of the redux global state, Reapex creates an Immutable Record from the initialValue. Think about it as the initial state of a reducer.

import { App } from 'reapex'

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

2. Create Mutations

The mutations describe how the model data will be updated.

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

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 strong-typed immutable Record with it. In this case, the state we used here will be Record<{total: number}>.

The return value of mutations function is a tuple: [actionCreators, actionTypes], the first value in the tuple is action creators. The second value is the 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 the box.

3. Connect with Component

Reapex only helps you to create the store & state. Connecting with components is just like any other 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>
    </>
  )
}

NOTE: the CounterModel.selectors is strong type and the total here will be a number

That's it! You can find the live example here: counter example

Found it interesting and want to learn more? Check out the reapex website

If you found it useful, please give it a star at Github