// main.js
import React, { createElement, Component, createContext } from 'react';
import ReactDOM from 'react-dom';
import {Connect, Provider} from './store'
import Input from './InputComp'
import TodoList from './TodoList'
import LoadingComp from './LoadingComp'
const Main = () => (
  <Provider>
    <h1>Todo:</h1>
    <LoadingComp>
      <TodoList/>
    </LoadingComp>
    <hr/>
    <Input/>
  </Provider>
)
ReactDOM.render(<Main />, document.getElementById("app"));

// store.js
import React, { createElement, Component, createContext } from 'react';
import createStoreFactory from 'redoor';
// Экспортируем все функции из actions.js и actionsSetup.js
import * as actions from './actions'
import * as actionsSetup from './actionsSetup'
// здесь мы указываем необходимые функции библиотеки React
const createStore = createStoreFactory({
  Component,
  createContext,
  createElement
});
// создаем стор в качестве параметра необходимо указать массив объектов
// всех используемых акшен функций
const { Provider, Connect } = createStore([
  actions,
  actionsSetup
]);
export { Provider, Connect };

// actions.js
// каждый локальный стейт может содержать свой набор переменных
// redoor автоматически добавит их глобальный стор
// initState зарезервированная переменая она может быть как объект,
// так и функция, которая возвращает объект со стейтом
export const initState = {
    todos:[],
    value:'',
}
// добавляем в массив новую задачу
// переменная state - содержит глобальный стейт
// переменная args - зависит от передаваемых значений из компонента
// возвращает функция новые переменные стейта
export const a_enter = ({state,args}) => {
  let {value,todos} = state;
  todos.push({
    id:(Math.random()+"").substr(2),
    value:value,
    done:false
  });
  return {
    value:'',
    todos
  }
}
// помечаем элемент как сделанное
export const a_done = ({state,args}) => {
  let {todos} = state;
  let id = args.id;
  todos = todos.map(it=>(it.id === id ? (it.done = !it.done, it) : it))
  return {
    todos
  }
}
// удаляем элемент из списка
export const a_delete = ({state,args}) => {
  let {todos} = state;
  let id = args.id;
  todos = todos.filter(it=>it.id !== id)
  return {
    todos
  }
}

// InputComp.js
import React from 'react';
import {Connect} from './store'
// redoor добавляет в пропсы функцию cxRun и все переменные
// глобально стора
const Input = ({cxRun, value})=><label className="input">
  Todo:
  // здесь мы можем поменять стор прямо из компонента
  <input onChange={e=>cxRun({value:e.target.value})}
          value={value}
          type="text"
  />
  // по нажатию вызываем акшен a_enter из нашено actions.js
  <button onClick={e=>cxRun('a_enter')} disabled={!value.length}>
    ok
  </button>
</label>
// соеденяем с redoor наш компонент и экспортируем
export default Connect(Input);

// TodoList.js
import React from 'react';
import {Connect} from './store'
const Item = ({cxRun, it, v})=><div className="item">
  // вызываем акшен a_done, где в качестве параметра указываем
  // элемент массива в ашенсе эта переменная будет называться args
  <div className="item_txt" onClick={e=>cxRun('a_done',it)}>
    {v+1}) {it.done ? <s>{it.value}</s> : <b>{it.value}</b>}
  </div>
  <div className="item_del" onClick={e=>cxRun('a_delete',it)}>
    ×
  </div>
</div>
const TodoList = ({cxRun, todos})=><div className="todos">
  {
    todos.map((it,v)=><Item key={v} cxRun={cxRun} it={it} v={v}/>)
  }
</div>
export default Connect(TodoList);

//actions.js
let __setState;
let __getState;
// подключаем методы работы со стейтом
export const bindStateMethods = (getState, setState) => {
  __getState = getState;
  __setState = setState;
};
export const a_setup = async ({state,args}) => {
  __setState({loading:true});
  let data = await loading();
  __setState({
    loading:false,
    todos:data
  })
}

yarn add redoor-devtool

npx redoor-devtool -o