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"]]]