Представляем Млин - новое государственное управление для реагирования

Впечатленный тонкозернистой концепцией реактивности от Solid-JS, я пытался построить библиотеку, которая приносит ее реагировать. Некоторые вопросы реагирования, которые я собирался решить, где:

Обеспечить возможность повторно отображать только эти элементы, которые связанные данные изменились.
Включите легкую двустороннюю привязку, однако поддержание однонаправленного потока данных.
Удалить необходимость переполнить код, явно упомянув все зависимости, поскольку мы в настоящее время сделаем с useffect. , UseCallback и Угемер Отказ
Вопросы с инкапсуляцией и модуляцией при использовании redux или контекста как управление государством (i ❤️ redux btw).

Теперь я собираюсь представить вам основные концепции библиотеки в примере приложения TOMEVC. Вы можете найти полный исходный код здесь Отказ Обратите внимание, что пример соответствует менее чем за 60 строк кода.

Прежде всего, давайте определим наш компонент:

export const App = seal(() => {
  // ...
});

Печать это импорт из реактивный это обертка Отреагировать. Мэмо , что сравнение функции всегда возвращает правда Отказ Это означает, что компонент никогда не должен повторно визуализации путем изменения входящих свойств (те, которые никогда не должны меняться). Все дети повторные рендеры будут запущены МЛИН Система реактивности. Теперь позвольте определить государство:

const state$ = useSubject({
  todos: [],
  newTitle: ""
});

Использовать . это реактивный крюк, который преобразует начальное состояние в Тема Отказ Субъект в Mlyn – это прокси-объект, который мы можем использовать 4 разными способами:

Вы можете прочитать от него:

// will return actual state
state$();

Вы можете написать ему:

// will set `newTitle` to `hello`
state$({
  ...state$(),
  newTitle: "hello",
});

Вы можете подписаться на это:

useMlynEffect(() => {
  // will log the `state$` value every time it's updated
  console.log(state$());
});

Читая состояние $ внутри Usemlyneffect Крюк, который мы автоматически устанавливаем его как зависимость, которая повторно запускает крючок каждый раз состояние $ был обновлен.

Вы можете его линзовать:

state$.newTitle("hello");
state$.newTitle(); // hello
state$(); // { newTitle: "hello", todos: [] }

Каждый линз ведет себя как предмет, но при обновлении пузыри неизменяемое обновление до корневого предмета. Также в пределах объектива вы можете подписаться на обновления только части государства.

Теперь отпустите обратно в наше приложение TOMEVC, пусть создают синхронизатор TODOS в локальное хранилище:

// this hook accepts a subject and a string key for localstorage
const useSyncronize = (subject$, key) => {
  // if localStorage already contains info for that key,
  // let write it to `subject$` as initial state
  if (localStorage[key]) {
    const preloadedState = JSON.parse(localStorage[key]);
    subject$(preloadedState);
  }
  // create a subscription to `subject$` and write
  // write it to localStorage when updated
  useMlynEffect(() => {
    localStorage[key] = JSON.stringify(subject$()); 
  });
};

Вызов этого крюка в коде компонента:

// create a lens to `state$.todos` and
// bind it to localStorage `todos` key.
useSyncronize(state$.todos, "todos");

Пусть создание методов добавления/удаления TODOS:

const addItem = () => {
  state$({
    todos: [
      // remember to use `()` when reading from a subject.
      ...state$.todos(),
      {
        title: state$.newTitle(),
        createdAt: new Date().toISOString(),
        done: false
      }
    ],
    newTitle: ""
  });
};

Это выглядит очень похоже на нормальное обновление реагирования, но вам не нужно обрывать его с помощью UseCallback так как с МЛИН Компонент не будет переназначен.

const removeItem = (i) => {
  state$.todos([
    ...state$.todos().slice(0, i),
    ...state$.todos().slice(i + 1)
  ]);
};

Обратите внимание, что, поскольку здесь вам нужно обновить просто тодос Вы можете напрямую написать на штат $ .тодос без заботы о остальном состоянии. Это очень удобно, при прохождении объектива в качестве недвижимости для ребенка. И, наконец, JSX:

return (
  <>
    Simple Todos Example
    
    
     createdAt}
    >
      {(todo$, index$) => (
        
          
          
          
        
      )}
    
  
);

Обратите внимание, что для входов мы используем специальный тег Mlyn.input. Он имеет некоторые свойства, которые обеспечивают подписки на реактивность Mlyn. Один из них BindValue. . Когда вы пройдете состояние $ .newtitle Для этого он оба обновит вход, когда NewTitle обновляется, и писать на NewTitle При изменении ввода. Короче говоря, это двустороннее связывание.

Теперь дай проанализировать, как Для Компонент, который используется для отображения коллекций Works:

 createdAt}
>
  {(todo$, index$) => (
    
      
      
      
    
  )}

Первый параметр $ TODO Функциональный ребенок PROP по-прежнему двусторонней линзой. Это означает, обновляя его, вы обновите Тодос Массив и вообще всего государство. Так что написать:

todo$.title("new value");

Как писать что-то похожее на сильфон в простом реакции:

setState({
  ...state,
  todos: state.todos.map(item => {
    if (getKey(item) === getKey(todo)) {
      return { ...item, title: "new value" };
    }
    return item;
  }),
});

Вы, вероятно, заметили, что один вход – это переключатель флажков для логического значения:

BindChecked похоже на BindValue. Но это создает двустороннее привязку для логического значения субъекта для ввода проверено поле.

Оригинал: “https://dev.to/vaukalak/introducing-mlyn-new-state-management-for-react-135c”

Simple Todos Example

Читайте ещё по теме: