Skip to content

wix-incubator/remx

Repository files navigation

SWUbanner

remx Build Status

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