Зачем просто, когда можно сложно? (Счётчик на 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);