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