calendee / remx

Opinionated mobx

remx

Remx is opinionated state-management library for React apps.

• Remx takes the redux (flux) architecture and enforces it using a small, simple, clean, and strict API:
  • state
  • setters
  • getters
  • observe
  • useConnect
• almost zero boilerplate
• zero impact on tests
  • can be added/removed as a plugin
  • does not impact any design decisions
• implemented with mobx, thus benefits from all the performance you get with
  • memoization
  • avoiding unnecessary re-renders
• uses es6 Proxies (where possible)
  • avoids mobx's Observable wrappers which can cause weird behaviour and bugs

Installation

npm install remx

API

• Create state

remx.state(initialState)

import * as remx from 'remx';

const initialState = {
  loading: true,
  posts: {},

  selectedPosts: [],
};

const state = remx.state(initialState);

• Define setters and getters

remx.getters(...)

import * as remx from 'remx';

const setters = remx.setters({

 setLoading(isLoading) {
   state.loading = isLoading;
 },
 
 addPost(post) {
  state.posts.push(post);
 }
 
});

const getters = remx.getters({
 
 isLoading() {
   return state.loading;
 },
 
 getPostsByIndex(index) {
  return state.posts[index];
 }
 
});

export const store = {
  ...setters,
  ...getters,
};

• Use observer to force a component to re-render if store data was used during previous render.

remx.observer(MyComponent)

import { observer } from 'remx';

class SomeComponent extends React.Component {
  render() {
    return (
      <div>{store.getPostById(this.props.selectedPostId)}</div>
    );
  }
}

export default observer(SomeComponent);

Also, works with functional components:

import { observer } from 'remx';

export default observer(props => (
  <div>{store.getPostById(props.selectedPostId)}</div>
))