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](#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:*
~~~javascript
import React from 'react'
import createStoreFactory from 'redoor';
const createStore = createStoreFactory({
Component: React.Component,
createContext: React.createContext,
createElement: React.createElement
} )
~~~
*preact:*
~~~javascript
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](https://github.com/rubender/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:*
~~~javascript
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:*
~~~javascript
import {Provider} from './store.js'
~~~
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:*
~~~javascript
import {Connect} from './store.js'
const Component = ({counter, text})=>
{text}:{counter}
export default Connect(Component, "text, counter")
~~~
## [Actions](#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:*
~~~javascript
export const a_switch = ({ state }) => {
return {
switch_button: state.switch_button === 'off' ? 'on' : 'off'
}
}
~~~
*async:*
~~~javascript
// 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:*
~~~javascript
let __setState;
let __getState;
let __emit;
export const bindStateMethods = (stateFn, updateState, emit) => {
__getState = stateFn;
__setState = updateState;
__emit = emit;
};
~~~
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
Function for sending a global event.
>__params__
__event_name__ - event name
__data__ - any data
>__return__
no
## [Devtool](#devtool)
[redoor-devtool](https://github.com/rubender/redoor-devtool)
## License
Distributed under the MIT License. See `LICENSE` for more information.