Neighbour Problem Manager

    react-subx
    TypeScript icon, indicating that this package has built-in type declarations

    0.9.0 • Public • Published

    react-subx

    Build Status npm version

    Official React bindings for SubX.

    Installation

    yarn add react-subx
    

    Usage

    import SubX from 'subx'
    import { Component } from 'react-subx'
    import React from 'react'
    import ReactDOM from 'react-dom'
    
    const store = SubX.create({
      number: 0,
      decrease () {
        this.number -= 1
      },
      increase () {
        this.number += 1
      }
    })
    
    class App extends Component {
      render () {
        const store = this.props.store
        return <div>
          <button onClick={e => store.decrease()}>-</button>
          <span>{store.number}</span>
          <button onClick={e => store.increase()}>+</button>
        </div>
      }
    }
    
    ReactDOM.render(<App store={store} />, document.getElementById('container'));

    It is super simple to use. Just let our components extend Component from 'react-subx' instead of React.Component. Make our store a SubX object, and update our store in whatever way we want. react-subx takes care of everything else.

    TodoMVC

    Here is a standard TodoMVC implemented with React & SubX

    online demo

    Philosophy

    A good state container should meet the following 3 criteria:

    1. Minimize computation
    2. Minimize rendering (of frontend framework, such as React)
    3. Minimize the burden of developers

    Minimize computation

    Use as many computed properties as necessary. SubX is smart enough to cache computed properties to avoid computation.

    Minimize rendering

    When working with a frontend framework such as React, it is important to control the number of re-render. Lots of re-render often leads to performance issues.

    react-subx takes care of this for us automatically. We don't need to define shouldComponentUpdate. We don't need to turn to reselect either. And it just works and it is just performant.

    Minimize the burden of developers

    I used to be a Ruby developer. I cannot agree more on "make developers happy".

    With react-subx, developers do NOT have to learn actions, reducers, dispatchers, selectors...etc.

    Just follow common sense and it just works and it's just performant.

    How does react-subx work?

    Simply put, react-subx deems React's render method as a computed property.

    It applies the same algorithm which powers SubX computed properties to React's render method. So that render method won't be invoked until absolutely necessary.

    Pitfalls

    react-subx tracks changes to React components' props, it is smart enough to figure out when to re-render the component.

    So if we want a piece of data to be tracked, make it a SubX object(or part of a SubX object) and pass it to React component via props.

    Never access global state directly

    It is bad practice for a React component to access global state directly. It should only receive data via props. If a React component accesses global data directly, react-subx won't re-render that component for us.

    Don't "cache" data out of render method in React component

    This one is hard to comprehend. Let me provide an example:

    import SubX from 'subx'
    import { Component } from 'react-subx'
    import React from 'react'
    import ReactDOM from 'react-dom'
    
    const store = SubX.create({
        todos: []
    })
    
    class App extends Component {
        constructor(props) {
            super(props)
            this.todos = props.store.todos
        }
        render() {
            return this.todos.map(todo => todo.tite).join(', ')
        }
    }
    
    ReactDOM.render(<App store={store} />, document.getElementById('container'));

    In the sample above, we "cached" this.todos in constructor. It might be a bad idea.

    Let's say we execute store.todos = [...] somewhere else. Then store.todos is no longer the this.todos we cached. Later changes to store.todos won't re-render component at all because it uses a cached version of this.todos which has been disconnected from store.

    If we want to save a todos for later reference, we can do it right inside the render method:

    render() {
        const todos = this.props.store.todos
        return todos.map(todo => todo.tite).join(', ')
    }

    Todo

    Support React Hooks

    Keywords

    none

    Install

    npm i react-subx

    DownloadsWeekly Downloads

    3

    Version

    0.9.0

    License

    MIT

    Unpacked Size

    201 kB

    Total Files

    7

    Last publish

    Collaborators

    • tylerlong