Skip to content

Latest commit

 

History

History
475 lines (348 loc) · 14.7 KB

README_RU.md

File metadata and controls

475 lines (348 loc) · 14.7 KB
Raw

[![MIT License][license-shield]][license-url]


🚪 redoor

React / Preact / Inferno
State container manager

[RU / EN ]

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 стейт менеджер для React, Preact, Inferno. Быстрая легкая библиотека всего 4.9kб.

Installation

npm

npm install redoor

yarn

yarn add redoor

Getting Started

Пример для 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 - состоит из двух сущностей: store и actaions. store - место хранения глобального стейта actaions - методы взаимодействия с store и компонентами

Store

Модуль инициализации проекта, здесь необходимо импортировать и у казать все необходимые actions моуди проекта. Так же по необходимости указать дебагер. Первое что надо сделать это создать store. Для этого необходимо инициализировать два метода createStoreFactory и его результат createStore. createStore возвращает два метода которые необходимо использовать в компонентах.

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

Прежде необходимо указать с какой библиотекой работает ваш проект. Это моет быть react, preact, inferno. Функция инициализации проекта, в качестве входных параметров принимет объект с тремя переменными.

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

Вернет функцию createStore

createStore / createStore(modules_array[, devtool_object])

params

modules_array - массив объектов (модулей) см. actions
devtool_object - необязательный параметр включения redoor-devtool. По умолчанию false. Если вы хотите подключить devtool сервер укажите объект содержащий:

host - ip devtool сервера port - порт name - название проекта

пример:

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

return

Возвращает объект { Provider , Connect }

Provider / <Provider></Provider>

Рутовый компонент, потомки которого могут быть подключены с помощью функции Connect

props

providerConfig - "пропс" компонента передается в функцию initState модуля "акшенсов".

пример:

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

Connect / Connect(Component [, filter_props_string])

Функция соеденения redoor стора с компонентом

params

Component - компонент к которому необходимо подключить redoor
filter_props_string - стринговая переменная, список параметров кторые необходимо передать компоненту. Переменные должны быть разделены запятой.

__return __

Возвращает компонент

пример:

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

Actions

Все акшенсы, а также вспомогательные функции должны быть переданы в массив createStore Модуль акшенсов имеет несколько функций название которых зарезерованно redoor. Названия акшенсов должны начинаться с префиксов: a_ или action. Каждый модуль акшенсов может экспортировать свою функцию инициализации. Redoor объединит все объекты в один. В случае если вы продублируете один и тот же параметр в разных модулях redoor выведет в консоль ошибку. Чтобы понять в каких модулях произошла ошибка укажите __module_name переменную в ваш модуль.

initState / initState(providerConfig)

Зарезервированная функция инициализации стора. Она может быть как объект так и функция.

params

providerConfig --- параметр получаемый от Provider

return

функция должна вернуть объект с начальными значениями стора

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

Акшенсы --- функции реализации логики работы с компанентами и сторам. Которые вызывают компоненты посредством cxRun. Функции должны в названии меть префикс a_ или action, в случае es6 модулей должны быть экспортированы.

params

Каждый акшенс имеет в качестве параметра объект с тремя аргументами: state --- текущий глобальный стейт
args --- параметр передаваемый через cxRun
emit(name, data) --- функция отправки глобального события. Где name --- название события, data --- передоваемые данные

return

Функция может вернуть объект с новыми данными стора и обновят все компоненты которые на них подписаны. Важно! Если функция будет асинхронной, то необходимо воспользоваться setState из bindStateMethods.

пример:

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

асинхронный код:

// 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)

Каждый акшен модуль может содержать функцию которая инициируется каждый раз когда происходит событие генерированное функцией emit компонентом или акшенсом.

params

name - название события
data - данные переданные через функцию emit

return нет

bindStateMethods / bindStateMethods(getState, setState, emit)

Если вы ваши акшенсы имеют асинхронный кода то необходимо пробросить функции обнаваления стейта redoor. Это так же может быть полезно в случае работы с вебсокетами

params

getState - функция получения стейта
setState - функция установки стейта
emit - функция отправки события

return нет

пример:

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)

Функция инициации акшенса или обновления стейта на прямую. Автоматически добавляется связанным компонентам через props.

params:

action_name - стринговая переменная название акшена
args - передоваемые акшену данные

return: нет

cxRun / cxRun(object)

Если в качестве параметра указан объект, то функция обнавляет стейт напрямую без акшена.

params

object - объект обновления глобального стейта

return нет

cxEmit / cxEmit(event_name, args)

Функция отправки глобального события. >__params__

event_name - название события
data - передоваемые данные

return нет

Devtool

redoor-devtool

License

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

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