Noah's Pairwise Manifest

    rtx

    0.0.4 • Public • Published

    rtx

    npm package

    A reactive library for Javascript Apps.

    Why rtx?

    rtx is a reactive library that provides for your application multiple stores, wich each store manage her state. You can organize your stores and turn your application more organized.

    ╔═════════╗       ╔════════════╗       ╔═══════════╗       ╔═════════════════╗
    ║  Store  ║──────>║  Dispatch  ║ ────> ║   State   ║ ────> ║ View Components ║
    ╚═════════╝       ╚════════════╝       ╚═══════════╝       ╚═════════════════╝
    
    

    Install

    • Npm: npm install rtx
    • Bower: bower install rtx

    Reasons for use

    • Tiny size: ~1kb
    • Best Performance
    • Reactive Stores
    • Simple and minimalistic API
    • Support nested states.
    • Unidirectional data flow

    Data Flow

    In rtx data flow is unidirectional, as it should be in Flux:

    • The store dispatch her actions
    • Actions change the state.
    • When state changes you can trigger a handler

    Principles:

    • Application state is held in the store, as a single object.
    • The only way to mutate the state is by dispatching store actions.
    • Actions must be synchronous, and the only side effects they produce should be mutating the state.

    Stores:

    A Store is basically a container that holds your application state. There are two things that makes a rtx store different:

    • A Store is reactive. Every time the state changes, you can trigger a handler.

    • You cannot directly change the store's state. The only way to change a store's state is by explicitly dispatching store actions.

    Creating a Store is pretty straightforward - just provide an name, state and actions:

    import rtx from "rtx";
     
    let todoStore = rtx.createStore({
      name: 'Todo',
      state:  {
        todos: []
      },
      actions: {
        ADD_TASK ( state, task ) {
          state.todos.push(task);
        },
        REMOVE_TASK ( state, index ) {
          state.todos.splice(index, 1);
        }
      }
    })
     
    // every time the state changes, this function will be triggered 
    todoStore.observe(function(listenables, state, value){
      listenables.forEach( ( component ) => {
        component.forceUpdate();
      })
    })
     
    module.exports = todoStore;

    State

    Application state is held in the store, as a single object. rtx uses a single state tree - that is, this single object contains all your Store level state and serves as the "single source of truth".

    Observe state changes in your Component

    When some state change in your store, your store handler function will called.

    // every time the state changes, this function will be triggered 
    TodoStore.observe(function(listenables, state, value){
      listenables.forEach( ( component ) => {
        component.forceUpdate();
      })
    })

    Your Component

    When some state change in your store, your store handler will be called.

    // Inside your Task Component
    import React from "react";
    import ReactDOM from "react-dom";
    import todoStore from "../store/todoStore";
     
    export default class Tasks extends React.Component {
      constructor(props){
        super(props);
        this.removeTask = this.removeTask.bind(this);
      }
      
      removeTask ( event ) {
        todoStore.dispatch('todos', 'REMOVE_TASK', event.target.id);
      }
      
      componentWillMount() {
        todoStore.subscribe(this)
      }
      
      componentWillMount() {
        todoStore.unsubscribe(this)
      }
      render ( ) {
        return (
          <div className="six columns full gray">
          <h1 className="title"> Tasks: { this.props.todos.length }</h1>
            <ul>
              {this.props.todos.map((todo, index) => {
                return <li key={index} id={index} onClick={ this.removeTask }> #{index} { todo } </li>
              })}
            </ul>
          </div>
        )
      }
    }
    // Inside your main Component
    import React from "react";
    import ReactDOM from "react-dom";
    import Todo from "./todo.jsx";
    import Tasks from "./tasks.jsx";
    import todoStore from "../stores/todoStore";
     
    const app = document.getElementById('app');
     
    class App extends React.Component {
      render() {
        return (
          <div>
            <Todo/>
            <Tasks todos = { todoStore.get('todos') }/>  
           </div>
        )
      }
    }
     
    ReactDOM.render(<App/>, app);

    Store Actions

    Actions are just functions that call the store actions. All actions receive a state as first argument.

    Creating an action inside your Store:

    actions: {
      increment ( state, n ){
        state.count += n
    }

    Calling an action on your component

      todoStore.dispatch('todos', 'ADD_TASK', 10);

    An action receives the state property that you want to change as first argument, the *action event name as the second argument, anything after these are passed as arguments to the action callback.

    Get

    To get the store state value, use yourStore.get( stateName ) in your Components or Stores.

    Application Structure

    Just suggesting.

    ├──index.html
    ├──components
    |   ├──component.tag
    |   ├──other.tag
    ├──stores
    |   ├──todo-store.js
    |   ├──api-store.js

    API Reference

    • #### Create a Store:

      • rtx.createStore({ name, state, actions }): Create a single store with the name of Store, State and Actions.
    • #### Store Actions:

      • yourStore.dispatch(stateName, action [,...arguments]): Call a store action.
    • #### Add you store handler to be called when the state changes:

      • yourStore.observe(listeners, stateName, stateValue): Register a handler that will be triggered when any state change in you store.
    • #### Observing the store state changes in your Component or other Store:

      • yourStore.subscribe( listener ): Add the listener for watch the Store state changes.
      • yourStore.unsubscribe( listener ): Remove the listener for unwatch the Store state changes.
      • yourStore.get(state): Gets a value of the store state that you passed as argument.

    License

    MIT License.

    Install

    npm i rtx

    DownloadsWeekly Downloads

    4

    Version

    0.0.4

    License

    MIT

    Last publish

    Collaborators

    • luisvinicius167