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
Redoor state manager for React, Preact, Inferno. A fast, lightweight library of only 4.9 kb.
npm
npm install redooryarn
yarn add redoorExample 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")); +-----+ `
|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
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")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)
event_name - event name
data - any data
return no
Distributed under the MIT License. See LICENSE for more information.
______ _______ ______ _____ _____ ______ |_____/ |______ | \ | | | | |_____/ | \_ |______ |_____/ |_____| |_____| | \_