remx 

$3

_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

$3

`javascript
import * as remx from "remx";

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

selectedPosts: [],
};

const state = remx.state(initialState);
`

- Define setters and getters

$3

`javascript
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.

$3

`javascript
import { observer } from "remx";

class SomeComponent extends React.Component {
render() {
return

;
}
}

export default observer(SomeComponent);
`

Also, works with functional components:

`javascript
import { observer } from "remx";

export default observer((props) => (



));
``