Зачем просто, когда можно сложно? (Счётчик на Redux)

Забавные примеры переусложнённого кода

Задача: увеличить счётчик на единицу. Так-так… Что же нам потребуется для её решения? Думаю, стора, middleware, саги, контекста provide/inject, компонента и серверного рендера будет достаточно…

Решение:

const { createSSRApp, h, inject, provide } = require(“vue”); const { renderToString } = require(“@vue/server-renderer”); const { createStore, applyMiddleware } = require(“redux”); const createSagaMiddleware = require(“redux-saga”).default; const { put, takeEvery } = require(“redux-saga/effects”);

const CounterContext = Symbol(“counter”);

function counterReducer(state = 0, action) {   if (action.type === “INCREMENT”) {     return state + 1;   }   return state; }

function* incrementSaga() {   yield put({ type: “INCREMENT” }); }

function* watchIncrement() {   yield takeEvery(“INCREMENT_REQUEST”, incrementSaga); }

const sagaMiddleware = createSagaMiddleware(); const store = createStore(counterReducer, applyMiddleware(sagaMiddleware)); sagaMiddleware.run(watchIncrement);

store.dispatch({ type: “INCREMENT_REQUEST” });

const Counter = {   setup() {     const count = inject(CounterContext);     return () => String(count);   } };

const App = {   setup() {     provide(CounterContext, store.getState());     return () => h(Counter);   } };

renderToString(createSSRApp(App)).then((html) => {   console.log(html); });

(Перед запуском в Node.js файла с этим кодом, например, demo.js, нужно выполнить:

npm init -y npm install vue @vue/server-renderer redux redux-saga node demo.js)

Работает. Но всё же проще так 🙂:

let count = 0; count++; console.log(count);

#javascript #коддетокс

Зачем просто, когда можно сложно? (Счётчик на Redux) | Сетка — социальная сеть от hh.ru