Need help with remx?
Click the “chat” button below for chat support from the developer who created it, or find similar developers for support.

About the developer

wix
177 Stars 19 Forks MIT License 243 Commits 11 Opened issues

Description

Opinionated mobx

Services available

!
?

Need anything else?

Contributors list

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 (

{store.getPostById(this.props.selectedPostId)}
); } }

export default observer(SomeComponent);

Also, works with functional components:

import { observer } from 'remx';

export default observer(props => (

{store.getPostById(props.selectedPostId)}
))

We use cookies. If you continue to browse the site, you agree to the use of cookies. For more information on our use of cookies please see our Privacy Policy.