redux-scene

React UI generated from redux state

Usage

Installation

npm install --save redux-scene

//Dependencies
npm install --save react react-dom redux react-redux

//Related
npm install react-foundation-lib

Example

Seting up redux-scene

    import React from 'react';
    import { render } from 'react-dom';
    import { Provider } from 'react-redux'; 
    import { createStore } from 'redux';
    
    import * as MyComponents from 'react-foundation-lib';
    
    import { Builder, reducer } from 'redux-scene';

    //Setup Redux
    let store = createStore(reducer);

    //Setup StageBuilder
    function resolveUI(stage) {
        return state.UI
    }

    let MyBuilder = new Builder(MyComponents, resolve, store.dispatch); 
    
    //Render Stage
    render((
            <Provider store={store}>
                <MyBuilder.Stage />
            </Provider>
        ),
        document.getElementById('root')
    );

    //Adding components to redux state
    import { actions, actionTypes } from 'redux-scene';
    store.dispatch(actions.stage.addScene('layout'));
    store.dispatch(actions.stage.setRoot('layout'));
    store.dispatch(actions.scene.addComponent('layout','button'));
    store.dispatch(actions.scene.addComponent('layout','text'));
    store.dispatch(actions.scene.addComponent('layout','div1'));
    store.dispatch(actions.scene.setRoot('layout', ['button','div1','text']));
    store.dispatch(actions.component.setType('layout','button','Button'));
    store.dispatch(actions.component.setAttr('layout','button', 'label', 'hi'));
    store.dispatch(actions.component.setEvent('layout','button','onClick', {type: "ON_CLICK", attr: 'blah'}));
    store.dispatch(actions.component.setType('layout','text','TextField'));
    store.dispatch(actions.component.setAttr('layout','text','value', 'first'));
    store.dispatch(actions.component.setEvent('layout','text','onChange', {type: actionTypes.component.SET_ATTR, attr: 'value'}));
    store.dispatch(actions.component.setType('layout','div1','div'));
    store.dispatch(actions.component.setContent('layout','div1',['component','button']));

Builder

The Builder class configures the redux-stage

Props

| props | description | |---|---| | RComp | object Collection of React Components { name: Component, ...} | | resolve | function resolve(state) user defined function that returns the portion of state containing the Stage data | | dispatch | the redux dispatch funciton |

function Stage(props)

returns a Stage component with the given props.

    <MyBuilder.Stage />

function Scene(props)

returns a Scene component with the given props.

    <MyBuilder.Scene Scene_ID={"scene_a"}/>

function Component(props)

returns a Component component with the given props.

    <MyBuilder.Component Scene_ID={"scene_a"} Component_ID={"component_a"} />

Elements

Stage

renders the entire redux-stage specified by the Builder Object

State

This is the highest level of the state. It contains a collection of Scenes and the name of the current scene to build. | attrs | definition | |---|---| | root | Specifies the root Scene of the Stage | | scenes | A collection of Scene Objects |

{
    root: rootScene,
    scenes: {
        sceneName: Scene,
        ...
    }
}

Scene

Props

| props | description | |---|---| | Scene_ID | string Scene identifier |

State

A Scene contains a collection of components and the heirarchy in which to present them. While scenes can be used in other scenes, components can only be directly used in the scene in which they are defined. | attrs | definition | |---|---| | root | string Component identifier or array [string Component identifier, ...] Specifies the highest level components of the Scene | | components | Collection of Components. Each has a unique name within the Scene. Components can only be used within the Scene they are defined |

{
    root: componentName or [componentName, ...],
    components: {
        componentName: Component,
        ...
    }
}

Component

Props

| props | description | |---|---| | Scene_ID | string Scene identifier | | Component_ID | string Component identifier or array [ string Component identifier, ...]

State

A Component contains all of the information to construct a React Component or an HTML element.

| attrs | definition | |---|---| | type | RComp or HTML element name | | attrs | attr: TypeGrammar; defines attributes | | events | event: actionType pairs to dispatch actions. actions contain the actionType and the value from the component | | content | TypeGrammar; content to render inside component

{
    type: typeName,
    attrs: {
        attr: TypeGrammar,
        ...
    },
    events: {
        event: actionType,
        ...
    },
    content: TypeGrammar
}

Type Grammar

TYPE:
       VALUE_TYPE
    || COMPONENT_TYPE
    || LIST_TYPE
    || ANY

LIST_TYPE:
    ["list", LIST<TYPE>]
VALUE_TYPE:
    ["value", ANY]
COMPONENT_TYPE:
    ["component", LIST<IDENTIFIER>]


LIST<L_TYPE>:
    L_TYPE
    || [L\_TYPE, ...]


ANY:
    !undefined
IDENTIFIER:
    [a-Z1-9\_-] ___String___

Examples:

1. "A String"
2. ["value", "Another String"]
3. ["component", "component_ref"]
4. ["component", ["several", "components"]]
5. ["list", ["A ", "List ", "Of ", "Strings"]]
6. ["list", [["component", "a"], "mixed", ["component", "list"]]]