redoor

React / Preact / Inferno
State container manager

Table of Contents

About the Project
Installation
Getting Started
Documentation
    Store
    createStoreFactory
    createStore
    Provider
    Connect
    Actions
    initState
    ACTION functions
    listen
    bindStateMethods
    __module_name
    cxRun(action_name, args)
    cxRun(object)
    cxEmit
Devtool
License

About The Project

Redoor state manager for React, Preact, Inferno. A fast, lightweight library of only 4.9 kb.

Examples projects

TODO
Websockets

Installation

npm

npm install redoor

yarn

yarn add redoor

Getting Started

Example for preact

import { h, Component, createContext, render } from 'preact';
import createStoreFactory from 'redoor';

const createStore = createStoreFactory({
    Component:Component,
    createContext:createContext,
    createElement:h
});

const actions_module = {
  initState:{
    cnt:0,
    direction:''
  },
  a_click:({state,args})=>({
    cnt:(state.cnt + args),
    direction:(args > 0 ? 'plus' : 'minus')
  })
}

const { Provider, Connect } = createStore([actions_module]);

const ButtonPlus = Connect(
  ({cxRun})=><button onClick={e=>cxRun('a_click',1)}>plus</button>
)

const ButtonMinus = Connect(
  ({cxRun})=><button onClick={e=>cxRun('a_click',-1)}>minus</button>
)

const Display = Connect(({direction,cnt})=><div>
      count: {cnt} <br/>
      direction: {direction}
</div>)

const Main = () => (
  <Provider>
    <Display/>
    <hr/>
    <ButtonPlus/> - <ButtonMinus/>
  </Provider>
)

render(<Main />, document.getElementById("app"));

Documentation

                           +-----+                  `
                           |Store|                  `
                           +-----+                  `
                              |                     `
 +---------+    +-----+    +------+    +---------+  `
 |Component| -> |cxRun| -> |Action| -> |new state|  `
 +---------+    +-----+    +------+    +---------+  `
      ^                                      |      `
      |                                      |      `
      +--------------------------------------+      `

Redoor - consists of two entities: store and actions. store - the storage location of the global state actions - methods for interacting with the store and components

Store

The project initialization module, here you need to import and specify all the necessary actions modules of the project. Also, if necessary, specify the debager options. The first thing to do is to create a store. To do this, you need to initialize two methods: createStoreFactory, createStore. createStore returns two methods that should be used in components.

createStore / createStoreFactory ({ Component, createContext, createElement } )

First, you need to specify which library your project works with. It can be react, preact, inferno. The project initialization function takes an object with three variables as input parameters.

params

Component createContext createElement

react:

import React from 'react'
import createStoreFactory from 'redoor';
const createStore = createStoreFactory({
    Component: React.Component,
    createContext: React.createContext,
    createElement: React.createElement
} )

preact:

import { h, Component, createContext } from 'preact';
import createStoreFactory from 'redoor';
const createStore = createStoreFactory({
    Component:Component,
    createContext:createContext,
    createElement:h
});

return

Returns function createStore

createStore / createStore(modules_array[, devtool_object])

params

modules_array - for an array of objects (modules), see actions
devtool_object - optional debugger object redoor-devtool. Default is false. If you want to connect the devtool server specify the object:

host - ip devtool сервера port - port name - name of project

example:

import * as actions_Main from './actions_Main.js'
const { Provider, Connect } = createStore(
    [ actions_Main ],
    {
        host: 'localhost',
        port: '8333',
        name:'project_name'
    }
);

return

Returns object { Provider , Connect }

Provider / <Provider></Provider>

A root component whose descendants can be connected using the function Connect

props

providerConfig - Property of the component is passed to the initState function of the "actions" module.

example:

import {Provider} from './store.js'
<Provider>
    <RootComponent providerConfig={{mobile:true}}/>
</Provider>

Connect / Connect(Component [, filter_props_string])

Connecting the redoor store to the component

params

Component - the component to connect to
filter_props_string - string variable, a list of parameters that must be passed to the component. Variables must be separated by commas. By default connect all props to component

__return __

Returns the component

example:

import {Connect} from './store.js'
const Component = ({counter, text})=><div>{text}:{counter}</div>
export default Connect(Component, "text, counter")

Actions

The action module has several functions, the name of which is redoor. Action names must start with the following prefixes: a_ or action. Each action module can export its own initialization function. Redoor will merge all the objects into one. If you duplicate the same parameter in different modules, redoor will output an error to the console. To understand which modules the error occurred in, specify the ** __module_name* * variable in your module.

initState / initState(providerConfig)

Reserved store initialization function. It can be either an object or a function.

params

providerConfig --- parameter received from Provider

return

the function should return an object with the initial values of the store

ACTION functions / ["a_", "action"]action_name({state, args, emit})

Actions - - - functions for implementing the logic of working with components and sotre. Which call components via cxRun. Functions must be prefixed with a_ or action in the name, in the case of es6 modules, they must be exported.

params

Every action has object as a parameter with three arguments: state --- the current global state
args --- the parameter passed through cxRun
emit(name, data) --- function to send global event. Where name - - - event name, _ _ data__ - - - transmitted data

return The function can return an object with new store data and update all the components that are subscribed to them. Important! For async functions you need to use setState from bindStateMethods.

example:

export const a_switch = ({ state }) => {
    return  {
        switch_button: state.switch_button === 'off' ? 'on' : 'off'
    }
}

async:

// cxRun("a_getUsers", "user_1")
let __getState;
export const bindStateMethods = (stateFn, updateState, emit) => {
    __setState = updateState;
};
export const a_getUsers = async ({ args: user_id, emit }) => {
    __setState({
        loading: true // show loading status
    });
    const userData = await getUserData(user_id); // get data
    emit('use_get_data', userData); // emit event "use_get_data"
    __setState({
        loading:false, // hide loading status
        userData // update user data
    });
};

listen / listen(name, data)

Each action module can contain a function that is triggered every time an event occurs generated by the emit function of a component or action.

params

name - event name
data - data passed through the function emit

return no

bindStateMethods / bindStateMethods(getState, setState, emit)

If you your actions have asynchronous code, then you need to throw the update functions of the redoor state. This can also be useful when working with websockets

params

getState - get state function
setState - set state function
emit - send event function

return no

example:

let __setState;
let __getState;
let __emit;
export const bindStateMethods = (stateFn, updateState, emit) => {
  __getState = stateFn;
  __setState = updateState;
  __emit = emit;
};

__module_name / __module_name

Reserved variable name for debug. Redoor use this variable for debug. Ex.:

export const  __module_name = 'pay_module'

cxRun / cxRun(action_name, args)

The function of initiating an action or updating the state directly. Automatically bind to related components via props.

params:

action_name - name of action (string)
args - any data (object,string array)

return: нет

cxRun / cxRun(object)

If an object is specified as a parameter, the function updates the state directly without an action.

params

object - object to update state

return no

cxEmit / cxEmit(event_name, args)

Function for sending a global event. >__params__

event_name - event name
data - any data

return no

Devtool

redoor-devtool

License

Distributed under the MIT License. See LICENSE for more information.

  ______ _______ ______   _____   _____   ______
 |_____/ |______ |     \ |     | |     | |_____/
 |    \_ |______ |_____/ |_____| |_____| |    \_