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.

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

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.

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

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 }

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>

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.

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

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
    });
};

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

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;
};

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

export const  __module_name = 'pay_module'

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: нет

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

event_name - event name data - any data

return no

Devtool

redoor-devtool

License

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