Как насчет использования событий NodeJS для реализации и обновления глобального состояния React? Хороший или плохой образец? - PullRequest
Новая
       6

Как насчет использования событий NodeJS для реализации и обновления глобального состояния React? Хороший или плохой образец?

0 голосов
/ 07 мая 2020

Написано на React и NodeJS, у меня есть модуль Provider и, возможно, много модулей Other.

Модуль Provider должен предоставлять некоторые data Other: data должен быть единственным источником истины и синхронизироваться со всеми Other модулями.

Вот решение, которое я придумал для синхронизированного глобального состояния с использованием NodeJS событий: 

// Updater.js module
const emitter = new EventEmitter(); // from NodeJS events
export function on(evt,job) { emitter.on(evt,job); }
export function off(evt,job) { emitter.off(evt,job); }
export function emit(evt,...args) { emitter.emit(evt,...args); }

// Function used to trick React towards re-rendering
function useForceUpdate() {
  const [flip,onFlip] = React.useState();
  return () => onFlip(!flip);
}

export function useUpdater(myevent) {
  const update = useForceUpdate();
  React.useEffect(() => {
    const trigger = () => setImmediate(update);  // Will force update React
    emitter.on(myevent,trigger);                 // Register force update on myevent 
    return () => emitter.off(myevent,trigger);   // Unregister
  });
}

// Provider.js
let data = 'some info';

export function useData() {
  Updater.useUpdater('dataUpdate');
  return data;
}

function compute() {
  ...some computation involving "data"...
  data = 'updated info';
  Updater.emit('dataUpdate');
}

// Other.js
function Component() {
  const serverData = Server.useData();   // Here I will eventually get the updated data
  return(<h1>serverData</h1>);
}

Некоторое объяснение:

  • Модуль Updater предоставляет событийный API для обновления data Provider. Updater создает состояние React, когда Provider регистрирует событие dataUpdate. Когда Provider испускается при событии, соответствующее состояние «переворачивается», чтобы React запускал повторный рендеринг.

  • Provider предоставляет Other модулям функцию которые заставляют их подписаться на событие для data и вернуть data. Затем, когда Provider меняет data, тогда Provider испускает событие.

  • Когда React запускает повторный рендеринг, каждый Other модуль Component повторно запускается, следовательно, каждый useData запускается повторно, что означает, что каждый Other получает обновленный data.

Теперь мои вопросы: Я знаю, что могу переписать свой код, используя React Context или Reducer. Но:

  • Может ли мое решение хуже, чем решение, возможно, основанное на Context или Reducer?

  • В чем будет разница с точки зрения повторного рендеринга и производительности?

  • Каковы минусы моего шаблона (потому что мой код работает)?

...