Better development experience with Redux
Tags: redux, react, typescript
Published: 2019-12-12 21:39:58


### Introduction to Reapex
[Reapex](https://reapex.lili.li/) is a lightweight framework to build pluggable and extendable redux/react application. 

Reapex offers:
1. Strong-typed state, selectors, actions out of the box.
2. Writing Redux code with NO action creators, NO action type constants, less maintenance headache.
3. Making code-splitting easier.
4. 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](https://reapex.lili.li/) 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](https://reapex.lili.li/) 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.

```bash
# 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.

```typescript
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.

```typescript
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.

```typescript
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](https://codesandbox.io/s/reapex-example-counter-9pyy6)

Found it interesting and want to learn more? Check out the [reapex website](https://reapex.lili.li/)

If you found it useful, please give it a star at [Github](https://github.com/ruanyl/reapex)