Русский
Русский
English
Статистика
Реклама

Manager

Мой стейт менеджер для React, Preact, Inferno

16.04.2021 14:07:36 | Автор: admin

Люблю изобретать велосипеды и прочие нужные предметы заново. Получается не всегда хорошо, но процесс интересный. Предлагаю вашему вниманию библиотеку управления стейтом для React, Preact (вес всего 4.8Кб). Библиотека еще находится разработке, но уже можно попробовать.

Начнем с примера всеми любимого TODO органайзера. Исходный код на гитхабе. Для начала создадим основной компонент main.js.

// main.jsimport 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"));

Далее стор. Стор нам необходим для инициализации библиотеки, а также тут мы указываем все необходимые файлы с акшенсами. В нашем примере это actions.js и actionsSetup.js

// store.jsimport React, { createElement, Component, createContext } from 'react';import createStoreFactory from 'redoor';// Экспортируем все функции из actions.js и actionsSetup.jsimport * as actions from './actions'import * as actionsSetup from './actionsSetup'// здесь мы указываем необходимые функции библиотеки Reactconst 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.jsimport 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);

cxRun может работать в двух режимах. Первый непосредственно менять содержимое стора, как в случае ввода строки или вызова акшенса из файла actions.js.

И последний компонент выводящий сам список дел.

// TodoList.jsimport 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)}>    &times;  </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);

Теперь по порядку. В нашем проекте в глобальном сторе всего две переменные value и todos. Инициализацией их занимается initState в файле actions.js. initState может быть объектом, так и функцией которая должна вернуть объект со стейтом. Тут важно понимать, что все стейты в акшенс файле помещаются в единый объект и каждый акшенс имеет доступ к любым переменным стейта.

Акшенсы -- это функции которые должны начинаться с префикса "а_" или "action". Имя функции акшенса будет указываться в качестве первого параметра при вызове cxRun. В качестве входного параметра будет объект с переменными state и args.

state -- это весь глобальный стейт проекта

args -- это второй параметр вызова функции cxRun. В нашем проекте при нажатии удалить мы вызываем cxRun('a_delete', it), где первым аргументом будет имя функции акшенса, а вторым сам элемент именно его мы и получаем в args.

Акшенс должен вернуть новое состояние стейта, которое автоматически перерисует компоненты которые подключены к стору.

Что делать если акшен работает асинхронно? Для этого нам необходимо подключить метод setState к локальным переменным файла actions.js с помощью функции bindStateMethods.

//actions.jslet __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  })}

Теперь при вызове акшенса "a_load", до начала загрузки появится значок загрузки, а после загрузки данных обновиться массив данных и значок загрузки будет отключен. Если внутри асинхронной функции необходимо получить глобальный стейт, можно вызвать __getState который вернет текущее состояние стейта.

Debugger

Для дебагинга есть инструмент redoor-devtool. Дебаггер это сервер который слушает данные от redoor библиотеки и передает их на одностраничник по адресу localhost:8333. Таким образом дебагер может находится не только в другом браузере, но и на другой машине. Что бывает удобно особенно при разработке для мобильных.

устанавливаем redoor-devtool:

yarn add redoor-devtool

и в отдельной консоли запускаем сервер дебаг консоли

npx redoor-devtool -o

ключик "-o" откроет хром по адресу http://localhost:8333, где будет дебаггер.

Заключение

От себя могу поделиться, что несколько проектов я уже сделал с помощью этой библиотеки. Довольно удобно было работать с ней в проекте с сокетами. Есть конечно и особенности использования. Например, надо помнить, что все акшенсы "видны" из всех модулей. Это не будет проблемой, если иметь четкую структуру наименования акшенсов. В своих проектах использую такое именование "a_moduleName_actionName".

На этом пока все. Будет интерес - постараюсь написать более подробный обзор.

Подробнее..
Категории: Javascript , React , State , Manager , Preact , Inferno

Важность диалога между PM-ом и разработчиком

28.12.2020 10:22:36 | Автор: admin

Рассматривается кейс разработки, определяются некоторые проблемы, формулируется необходимость диалога.

Кейс разработки.
Разработчик завис над простой задачей. Занимался задачей две недели. По результатам двух недель работы внес в репозиторий изменений на 10-20 строк кода. В отчете по задаче множество технических деталей. В отчете выставил необходимость дополнительного времени на доработку задачи.

Если для вас кейс очевиден, то можно дальше и не читать.

Список проблем.

Перерасход бюджета. Разработчик потратил уйму времени на простую фичу и требует дополнительное время.

Разработчик не способен аргументировать необходимость больших временных затрат на простую фичу.

Возможность конфликта с разработчиком.


Возможность демотивации разработчика. Разработчик не доволен качеством существующей системы. Разработчик старался улучшить систему. Задача полностью не решена. Но работать с некачественной системой у разработчика мало мотивации.

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

Возможность дальнейших прецедентов построения замков со стороны разработчика. Разработчик, возможно, будет игнорировать указания руководителя и самостоятельно выделять время на улучшение качества системы. За счёт основных фич, т.е. с уменьшением затрат на основную функциональность, которая приносит прибыль.

Разработчик не умеет перевести технические детали предполагаемого решения на язык преимуществ для пользователя.

Разработчик не может сформулировать почему низкое качество системы ведёт к ухудшению бизнес показателей продукта.

Разработчик не понимает, какие функции выполняет руководитель. В чем его обязанности для продвижения продукта. Разработчик не умеет выразить технические детали на языке преимуществ продукта и поэтому не пытается выйти за рамки технического диалога.

Разработчик не знаком со стратегией развития продукта. Поэтому предлагает решения, которые не нужны на текущем этапе развития продукта.


И так далее. (Прописываю только часть проблем.)

Решения.


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

Спасибо.

Подробнее..

Категории

Последние комментарии

  • Имя: Макс
    24.08.2022 | 11:28
    Я разраб в IT компании, работаю на арбитражную команду. Мы работаем с приламы и сайтами, при работе замечаются постоянные баны и лаги. Пацаны посоветовали сервис по анализу исходного кода,https://app Подробнее..
  • Имя: 9055410337
    20.08.2022 | 17:41
    поможем пишите в телеграм Подробнее..
  • Имя: sabbat
    17.08.2022 | 20:42
    Охренеть.. это просто шикарная статья, феноменально круто. Большое спасибо за разбор! Надеюсь как-нибудь с тобой связаться для обсуждений чего-либо) Подробнее..
  • Имя: Мария
    09.08.2022 | 14:44
    Добрый день. Если обладаете такой информацией, то подскажите, пожалуйста, где можно найти много-много материала по Yggdrasil и его уязвимостях для написания диплома? Благодарю. Подробнее..
© 2006-2024, personeltest.ru