remx

Remx is opinionated state-management library for React apps.

Website with getting started and docs: https://wix.github.io/remx/

• 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>
));

4.0.0 (RC)

• Remove legacyRemx, Update to mobx@6
• Add error on accessing state in render w/o observer (#66)
• Introduce observer, deprecate connect

3.0.0

• Upgraded to mobx@4 and mobx-react@5.

2.0.0

Complete support for es6 Proxies

• cleaner api, original objects (without all those ObservableArray wrappers), more performant.

• No need for toJS: from now on remx.state(initialState) will return a plain object.

• import { connect } from remx/react-native; is now changed to: import { connect } from remx. Agnostic to environment.

• There is no more merge function on the state object. remx.state is now a plain object so you can use any merge function you want, or you can just mutate the state. (You can still import the merge function from remx: import { merge } from remx for easier merging)

• Added registerLoggerForDebug