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