Показать сообщение отдельно
  #1 (permalink)  
Старый 08.04.2021, 20:12
Новичок на форуме
Отправить личное сообщение для rubender Посмотреть профиль Найти все сообщения от rubender
 
Регистрация: 08.04.2021
Сообщений: 1

Новый стейт менеджер для react, preact
Предлагаю вашему вниманию мой велосипед

https://github.com/rubender/redoor

Когда я делал библиотеку хотел сделать как можно проще библиотеку управления стейтом для реакта, так и родилась эта библиотека.
Я ее обкатываю уже где то год.

пример использования:
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"));
Ответить с цитированием