rematch-model

Class-based models for rematch, containing state, actions, reducers and selectors.

Usage

Prerequisites:

Rematch

Babel decorators

With immer

Rematch Immer Plugin

All reducers can work with state immutabily (they becomes wrapped with Immer's produce behind the scenes):

    @reducer
    ADD_TODO({ id, text }) {
        this.state[id] = { id, text, completed: false };
    }
    
    @reducer
    TOGGLE_TODO({ id }) {
        this.state[id].completed = !this.state[id].completed;
    }

Without immer

Classic redux-style reducers, returning new state:

    @reducer
    TOGGLE_TODO({ id }) {
        return {
            ...this.state,
            [id]: {
                ...this.state[id],
                completed: !this.state[id].completed
            }
        };
    }

Connecting to React components with rematch-inject

rematch-inject transfers model's state and all public methods to your React class component:

@inject('todo')
class TodoList extends React.Component {

Connecting to components the old way

You can also connect store to your React component using react-redux connect and mapStateToProps + mapDispatchToProps:

@connect(({ todo }) => ({ todo }), ({ todo }) => ({ ...todo }))

connect and inject can be also composed and used without decorators.

Selectors

Injecting static method of your model works as selector and connects dynamically calculated props to your component:

@inject(TodoStore.withToggled)

	static withToggled({ todo }) {
		return {
			toggled: Object.keys(todo).filter(f => todo[f].completed),
		};
	}

TypeScript

TypeScript examples:

Store

Injecting to components

import { inject, Injected } from 'rematch-inject';

export type TodoListProps = 
    Injected<TodoStore> &
    Injected<typeof TodoStore.withToggled>;

@inject('todo')
@inject(TodoStore.withToggled)
export default class TodoList extends React.Component<TodoListProps> {

Inspiration

rematch-class-model

MobX