🤔 Для чего нужен централизованный режим событий?

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

🚩Плюсы

➕Упрощение управления событиями
➕Повышение поддерживаемости
➕Масштабируемость
➕Избежание дублирования кода
➕Лучшая организация взаимодействия между компонентами

🚩Примеры централизованного режима событий:

🟠Vue.js и Vuex
В приложениях, использующих Vue.js, централизованное управление состоянием и событиями часто реализуется с помощью Vuex. Vuex позволяет управлять состоянием приложения и событиями в одном месте.

// store.js
import Vue from 'vue';
import Vuex from 'vuex';

Vue.use(Vuex);

export default new Vuex.Store({
  state: {
    message: ''
  },
  mutations: {
    setMessage(state, message) {
      state.message = message;
    }
  },
  actions: {
    updateMessage({ commit }, message) {
      commit('setMessage', message);
    }
  }
});

// Component.vue
<template>
  <div>
    <input v-model="message" @input="updateMessage(message)">
    <p>{{ message }}</p>
  </div>
</template>

<script>
import { mapState, mapActions } from 'vuex';

export default {
  computed: {
    ...mapState(['message'])
  },
  methods: {
    ...mapActions(['updateMessage'])
  }
};
</script>

🟠Redux в React
Это библиотека для управления состоянием в приложениях React, которая также предоставляет централизованный механизм для управления событиями и состоянием.

// actions.js
export const setMessage = message => ({
  type: 'SET_MESSAGE',
  payload: message
});

// reducer.js
const initialState = {
  message: ''
};

const reducer = (state = initialState, action) => {
  switch (action.type) {
    case 'SET_MESSAGE':
      return {
        ...state,
        message: action.payload
      };
    default:
      return state;
  }
};

export default reducer;

// store.js
import { createStore } from 'redux';
import reducer from './reducer';

const store = createStore(reducer);

export default store;

// Component.js
import React from 'react';
import { useSelector, useDispatch } from 'react-redux';
import { setMessage } from './actions';

const Component = () => {
  const message = useSelector(state => state.message);
  const dispatch = useDispatch();

  const handleChange = (event) => {
    dispatch(setMessage(event.target.value));
  };

  return (
    <div>
      <input value={message} onChange={handleChange} />
      <p>{message}</p>
    </div>
  );
};

export default Component;

🟠EventEmitter в Node.js
В Node.js можно использовать EventEmitter для централизованного управления событиями.

const EventEmitter = require('events');
class MyEmitter extends EventEmitter {}

const myEmitter = new MyEmitter();

// Обработчик события
myEmitter.on('event', (message) => {
  console.log('Received:', message);
});

// Генерация события
myEmitter.emit('event', 'Hello, World!');

Ставь 👍 и забирай 📚 Базу знаний