Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/wix-incubator/remx
Opinionated mobx
https://github.com/wix-incubator/remx
Last synced: 2 days ago
JSON representation
Opinionated mobx
- Host: GitHub
- URL: https://github.com/wix-incubator/remx
- Owner: wix-incubator
- License: mit
- Created: 2016-10-09T13:39:49.000Z (about 8 years ago)
- Default Branch: master
- Last Pushed: 2024-09-12T09:59:41.000Z (about 2 months ago)
- Last Synced: 2024-10-30T08:29:52.114Z (5 days ago)
- Language: JavaScript
- Homepage: https://wix-incubator.github.io/remx/
- Size: 1.81 MB
- Stars: 224
- Watchers: 284
- Forks: 19
- Open Issues: 21
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE
- Codeowners: CODEOWNERS
Awesome Lists containing this project
- awesome-state - remx
README
[](https://stand-with-ukraine.pp.ua)
# remx [](https://travis-ci.org/wix/remx)
### Remx is opinionated state-management library for React apps.
_Website with getting started and docs: [https://wix.github.io/remx/](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)`
```javascript
import * as remx from "remx";
const initialState = {
loading: true,
posts: {},
selectedPosts: [],
};
const state = remx.state(initialState);
```
- Define setters and getters
### `remx.getters(...)`
```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.
### `remx.observer(MyComponent)`
```javascript
import { observer } from "remx";
class SomeComponent extends React.Component {
render() {
return
{store.getPostById(this.props.selectedPostId)};
}
}
export default observer(SomeComponent);
```
Also, works with functional components:
```javascript
import { observer } from "remx";
export default observer((props) => (
{store.getPostById(props.selectedPostId)}
));
```